Automatically Fit Width of Grid Columns to Show All Data

Environment

Product	Progress® Kendo UI® Grid for jQuery
Operating System	All
Browser	All
Browser Version	All

Description

How can I have the columns of a Kendo UI for jQuery Grid automatically fit their width to accommodate their contents?

Solution

1. Subscribe to the dataBound event.
2. Use the autoFitColumn method.

If you have to only set the checked property of the columns to true, use the dataBound event.

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

    <script>
      $(document).ready(function() {
        var grid = $("#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() {
            for (var i = 0; i < this.columns.length; i++) {
              this.autoFitColumn(i);
            }
          },
          columns: [{
            field: "OrderDate",
            title: "Order Date",
            format: "{0:MM/dd/yyyy}"
          },
          {
            field: "ShipCountry",
            title: "Ship Country"
          },
          {
            field: "ShipCity",
            title: "Ship City"
          },
          {
            field: "ShipName",
            title: "Ship Name"
          },
          {
            field: "ShippedDate",
            title: "Shipped Date",
            format: "{0:MM/dd/yyyy}"
          },
          {
            field: "OrderID",
            title: "ID"
          }, {
            field: "OrderDate",
            title: "Order Date",
            format: "{0:MM/dd/yyyy}"
          },
          {
            field: "ShipCountry",
            title: "Ship Country"
          },
          {
            field: "ShipCity",
            title: "Ship City"
          },
          {
            field: "ShipName",
            title: "Ship Name"
          },
          {
            field: "ShippedDate",
            title: "Shipped Date",
            format: "{0:MM/dd/yyyy}"
          },
          {
            field: "OrderID",
            title: "ID"
          }
         ]
        });
      });
    </script>
  </div>
  <style>
    #grid>table
    {
      table-layout: fixed;
    }
  </style>

See Also

• API Reference of the autoFitColumn Method
• Appearance of the Grid
• API Reference of the dataBound Event