Set the Width of the Row Filter Suggestions in Grids

Environment

Product Version	2017.3 1026
Product	Progress® Kendo UI® Grid for jQuery

Description

How can I set the width of the filter drop-down in the Grid header when the drop-down contains long texts:

• Without wrapping the content?
• Without increasing the column width?
• Setting the length to approximately match the length of the longest text?

Solution

Programmatically set the autoWidth property of the AutoComplete when the Grid is initialized.

 <div id="example">
            <div id="grid"></div>
            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                            },
                            schema: {
                                model: {
                                    fields: {
                                        OrderID: { type: "number" },
                                        Freight: { type: "number" },
                                        ShipName: { type: "string" },
                                        OrderDate: { type: "date" },
                                        ShipCity: { type: "string" }
                                    }
                                }
                            },
                            pageSize: 20,
                            serverPaging: true,
                            serverFiltering: true,
                        },
                        dataBound:function(e){
                          $(e.sender.element).find('[data-role="autocomplete"]').each(function(){
                            $(this).data("kendoAutoComplete").setOptions({autoWidth:true})
                          })
                        },
                        height: 550,
                        filterable: {
                            mode: "row"
                        },
                        pageable: true,
                        columns:
                        [{
                            field: "OrderID",
                            width: 225,
                            filterable: {
                                cell: {
                                    showOperators: false
                                }
                            }
                        },
                        {
                            field: "ShipName",
                            width: 200,
                            title: "Ship Name",
                            filterable: {
                                cell: {
                                    operator: "contains",
                                    suggestionOperator: "contains"
                                }
                            }
                        },{
                            field: "Freight",
                            width: 255,
                            filterable: {
                                cell: {
                                    operator: "gte"
                                }
                            }
                        },{
                            field: "OrderDate",
                            title: "Order Date",
                            format: "{0:MM/dd/yyyy}"
                        }]
                    });
                });
            </script>
        </div>