Edit this page

autoFitColumn

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

Parameters

column Number |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.

Example - autofit a column by index

<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>

Example - autofit a column by field

<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>

Example - autofit a column by column object reference

<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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy