Kendo Grid with Fixed Column

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>

CSS

tbody:empty:before {
    content:'NO DATA';
   
}

JavaScript

$("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            // read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customerss"
        },
        pageSize: 10
    },
    groupable: true,
    sortable: true,
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5,
        messages: {
            empty: "No data"
        }
    },
    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);
    }
});