New to Kendo UI for jQuery? Download free 30-day trial

Setting Initial Column Width to minResizableWidth in Kendo UI Grid

Environment

Product Grid for Progress® Kendo UI®
Version 2024.3.1015

Description

When working with the Kendo UI Grid, I noticed the columns' initial width does not match the minResizableWidth setting. I want the initial column width to be set according to the minResizableWidth value.

This KB article also answers the following questions:

  • How to dynamically adjust the Kendo UI Grid column width to the minimum resizable width on initialization?

Solution

The minResizableWidth option in the Kendo UI Grid configures the minimum width that a column can be resized to, not its initial width. To set a column's initial width to its minResizableWidth, apply the width configuration option or adjust the width programmatically after the Grid initialization.

To adjust the width of the first column to its minResizableWidth, use the following approach:

dataBound: function(e){
              let grid = e.sender;     
              grid.resizeColumn(grid.columns[0], grid.columns[0].minResizableWidth);
            },

Below is a runnable example where the width of the first column is changed:

<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" },
                    ShipCountry: { type: "string" },
                    ShipCity: { type: "string" },
                    ShipName: { type: "string" },
                    OrderDate: { type: "date" },
                    ShippedDate: { type: "date" }
                  }
                }
              },
              pageSize: 15
            },
            height: 550,
            sortable: true,
            resizable: true,
            pageable: true,
            dataBound: function(e){
              let grid = e.sender;     
              grid.resizeColumn(grid.columns[0], grid.columns[0].minResizableWidth);
            },
            columns: [
              {
                field: "OrderDate",
                title: "Order Date",
                format: "{0:MM/dd/yyyy}",
                minResizableWidth: 200
              },
              {
                field: "ShipCountry",
                title: "Ship Country",

              },             
              {
                field: "ShipName",
                title: "Ship Name"
              },
              {
                field: "ShippedDate",
                title: "Shipped Date",
                format: "{0:MM/dd/yyyy}"                
              },
              {
                field: "OrderID",
                title: "ID"               
              }
            ]
          });

        });
      </script>

For changing the width of all columns to their respective minResizableWidth, iterate over the columns array using the same method:

let grid = $("#grid").data('kendoGrid');
$.each(grid.columns, function(index) {
    grid.resizeColumn(grid.columns[index], grid.columns[index].minResizableWidth);
});

See Also

In this article