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>