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

AutoFitColumn

methods

Applies the minimum possible width for the specified column, so that all text fits without wrapping.

autoFitColumn

Parameters:columnNumber|String|Object

The index of the column, or the field to which the columns is bound, or the column object obtained from the columns collection.

When using multicolumn headers, using an index is not allowed. In such scenarios, please use a field name or a column object as a method argument.

The method ignores and does not resize hidden columns.

Auto-fitting all columns at once is a resource-intensive operation and is not recommended. A better option is to auto-fit only a few columns that have the most variable content in terms of length. Alternatively, disable scrolling and allow the browser to adjust all column widths automatically, according to their content.

Use autoFitColumn only after the Grid has been databound. Executing the method immediately after Grid initialization makes no sense and can lead to undesired behavior.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
  ]
});
var grid = $("#grid").data("kendoGrid");
grid.autoFitColumn(1);
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
  ]
});
var grid = $("#grid").data("kendoGrid");
grid.autoFitColumn("age");
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    columns: [{
        title: "Person",
        columns: [
            { field: "fname", title: "First name"},
            { field: "lname", title: "Last name"}
        ]}, {
            field: "age"
        }
    ],
    dataSource: [
        { fname: "Jane", lname: "Smith", age: 30 },
        { fname: "John", lname: "Stevens", age: 33 }
    ]
});
var grid = $("#grid").data("kendoGrid");
grid.autoFitColumn(grid.columns[0].columns[1]);
</script>