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

AutoFitColumns

methods

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.

autoFitColumns

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

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