This is a migrated thread and some comments may be shown as answers.

[Solved] Grids - Freezing Columns

3 Answers 149 Views

Grid

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

3 Answers, 1 is accepted

answered on 18 Apr 2012, 07:34 AM

I am writing a reply to this post to let you all know that Column Freezing can be easily applied to Telerik's MVC grid. I have worked out with many alternatives provided in various forumns and end up with poor performance and my client is not accepting the solution. This one is a simple and light appoach i have concluded.
The solution will need a css class and a javascript function. you will need to call the js function on client side event "OnDataBound".
the following gives you 50% solution. you will need to bind client event of the grid for OnEdit, OnRowDataBound.... and implement the similar code as i do in contentDiv.scroll event handler.
-----tested on IE, FF, Chrome, Safari------------------
td.locked, th.locked { z-index:99; position:relative; /* any attributes you need */}
//for firefox, use position:absolute. but this will give an unpleasent background;

function freezeColumn(telerikGridId){
    //use jquery
    var grid = $('#' + telerikGridId);
    var gridRows = grid.find('tr');
    gridRows.each(function(){
        var firstTd = $(this).find('td')[0];
        $(firstTd).addClass('locked');
    });
    //very important solution
    var contentDiv = grid.find('.t-content-grid'); //USE IE DEVELOPER TOOL to find the exact class name
    contentDiv.scroll(function(){
        var leftPosition = contentDiv.scrollLeft();
        gridRows = grid.find('tr');
        gridRows.each(function(){
            var firstTd = $(this).find('td')[0];
            $(firstTd).css('left', leftPosition);
        });
    });
}