JSFiddle - React, Tailwind, and code Playground

by Dan Mathisen

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.uniform.min.css">
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<div class="report-grid-container" style="margin: 5px 20px;">
    <div class="report-grid"></div>
</div>

JavaScript

$(".report-grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
        },
        pageSize: 50
    },
    height: 500,
    sortable: true,
    columns: [
        {
            field: "ContactName",
            title: "Contact Name",
            width: 300
        }, {
            field: "ContactTitle",
            title: "Contact Title",
            width: 300
        }, {
            field: "CompanyName",
            title: "Company Name",
            width: 300
        }, {
            field: "Country",
            width: 300
        }
    ],
    dataBound: function() {
        freezeCol();
    }
});

function freezeCol() {
    var $grid = $('.report-grid'),
        $gridContent = $grid.find('.k-grid-content'),
        $gridHeader = $grid.find('.k-grid-header');
    
    // add lockedcolumn classes
    $grid.addClass('k-grid-lockedcolumns');
    
    // clone grid and header
    var $lockedTable = $gridContent.find('table').clone(),
        $lockedTableHeader = $gridHeader.find('table').clone();
    
    // remove cols and cells from tables
    //
    
    // locked table - remove roles
    $lockedTable.removeAttr('role');
    $lockedTable.find('tbody').removeAttr('role');
    $lockedTable.removeAttr('style');
    
    // locked table - remove all but first col
    $lockedTable.find('col:gt(0)').remove();
    
    // locked table - remove all but first tds
    $lockedTable.find('tr').each(function() {
        var $this = $(this);
        $this.find('td:gt(0)').remove();
    });
    
    // locked table header - remove all but first col
    $lockedTableHeader.find('col:gt(0)').remove();
    
    // locked table header - remove all but first tds
    $lockedTableHeader.find('tr').each(function() {
        var $this = $(this);
        $this.find('th:gt(0)').remove();
    });
    
    // orig table - remove first col
   ...