Edit this page

Increase Width to Potentially Show Full Column Values

Environment

Product Progress Kendo 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.

.k-animation-container>form {
  width: 300px;
}
.k-filter-menu .k-datepicker, .k-filter-menu .k-datetimepicker, .k-filter-menu .k-dropdown, .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-dropdown, .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",
              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,
              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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy