autoFitColumns

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

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 (autoFitColumn) 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 autoFitColumns only after the Grid has been databound. Executing the method immediately after Grid initialization makes no sense and can lead to undesired behavior.

Parameters

columns Array optional

A set of column objects obtained from the columns collection. If parameter is not provided all Grid columns will be auto-fitted.

Example - autofit all collumns

<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 }
    ],
    dataBound: function (e) {
        e.sender.autoFitColumns();
    },
});
</script>

Example - autofit set of columns

<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 }
    ],
    dataBound: function (e) {
        var grid = e.sender;
        grid.autoFitColumns(grid.columns[0].columns);
    },
});
</script>