kendo grid expand to fit all columns

Question

I have a Kendo UI grid with 20 columns, all of which have text data.

When Kendo renders the grid, every column (and column heading) has an ellipsis (...) indicating that the content was truncated.

I've created an example of this here: http://dojo.telerik.com/iRIqU

It seems like the grid width adapts to the width of the container it's in - rather than forcing the necessary width to display all data, and scrolling horizontally.

Is there a way to achieve this, so all the data is readable? (i.e. the way Format > Column > AutoFit Selection works in Excel.)

I've tried

changing the TD style with whitespace: nowrap;, but this just causes the text to overlap into each column
setting the grid to resizeable:true and calling, e.g. grid.autoFitColumn(1); - but all this does is reduce the width of column 1 to better accommodate the other columns in my grid

There is a Width property you can set for each column in your grid code. Give that a try. — ShawnOrr
I want the width to be as wide as the longest content for that column, not a fixed value — Black

Roman Koliada Roman Koliada · Accepted Answer · 2018-01-17T14:19:15

According to the documentation it's better to call grid.autoFitColumn only after the Grid has been databound.

Also be aware that:

Auto-fitting all columns at once is a resource-intensive operation and is not recommended.

See my fixed example: http://dojo.telerik.com/iRIqU/2

$(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(e) {
      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"
      }
    ]
  });

  //grid.autoResizeColumn(1);
  //grid.autoResizeColumn(2);
});

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.mobile.min.css" />

<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>

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

kendo grid expand to fit all columns

1 Answers