Increase Width to Potentially Show Full Column Values

Environment

Product	Progress® Telerik® UI Grid for ASP.NET MVC
Operating System	Windows 10 64bit
Browser	Google Chrome
Browser Version	Version 61.0.3163.79 (Official Build) (64-bit)
.NET Framework	Version 4.6
Visual Studio Version	Visual Studio 2017

Description

How can I make the filter menu of the Grid wider?

Solution

Use CSS rules to expand the width of the container and the elements that are located inside it. To avoid the impact of the selector on the other page elements, you might need to modify it.

js

.k-animation-container>form {
  width: 300px;
}
.k-filter-menu .k-datepicker, .k-filter-menu .k-datetimepicker, .k-filter-menu .k-dropdownlist, .k-filter-menu .k-numerictextbox, .k-filter-menu .k-textbox, .k-filter-menu .k-timepicker {
  width: 100%;
}
.k-filter-menu span.k-filter-and {
  width: 100%;
}

On the filterMenuInit event, you can also set the width of the container per menu.

<div id="grid"></div>

<style>
      .k-filter-menu .k-datepicker, .k-filter-menu .k-datetimepicker, .k-filter-menu .k-dropdownlist, .k-filter-menu .k-numerictextbox, .k-filter-menu .k-textbox, .k-filter-menu .k-timepicker {
        width: 100%;
      }
      .k-filter-menu span.k-filter-and {
        width: 100%;
      }
</style>

<script>
        $(document).ready(function() {
          $("#grid").kendoGrid({
            dataSource: {
              type: "odata-v4",
              transport: {
                read: "https://demos.telerik.com/service/v2/odata/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,
              serverSorting: true
            },
            height: 550,
            filterable: true,
            sortable: true,
            filterMenuInit:function(e){
              $(e.container).css("width", "300px")
            },
            pageable: true,
            columns: [{
              field:"OrderID",
              filterable: false
            },
                      "Freight",
                      {
                        field: "OrderDate",
                        title: "Order Date",
                        format: "{0:MM/dd/yyyy}"
                      }, {
                        field: "ShipName",
                        title: "Ship Name"
                      }, {
                        field: "ShipCity",
                        title: "Ship City"
                      }
                     ]
          });
        });
</script>