Kendo Grid with Fixed Column

by Jens Kühn

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<div id="grid"></div>

JavaScript

$("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
        },
        pageSize: 10
    },
    groupable: true,
    sortable: true,
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
    },
    columns: [
        {
            field: "ContactName",
            title: "Contact Name",
            width: 175,
            locked: true
        }, {
            field: "ContactTitle",
            title: "Contact Title",
            width: 175
        }, {
            field: "CompanyName",
            title: "Company Name",
            width: 175
        }
    ],
    dataBound: function(e) {
        console.log(this);
        var $grid = $(this.element[0]),
            newWidth = $grid.find('.k-grid-content').width() - 15;
        $grid.find('.k-grid-header-wrap > table, .k-grid-content > table').css('width', newWidth);
    }
});