Freezing Edit/Update-Cancel in RadGrid

[Deepak Vasudevan]

Dear Telerik Team,

I am using RadGrid and a few splitter tricks for display and editing of large amount of data. In Edit mode, when the user keeps tabbing, the SAVE goes out of focus. Now the user has to click the right end of scrollbar to make the the Save appear all over again.

I am looking out to see if I can freeze the column that shows Update/Cancel (similar to the examples/demo shared out in http://www.telerik.com/community/forums/aspnet-ajax/grid/how-to-freeze-columns-in-radgrid.aspx)

How to make the column that shows Update/Cancel as Frozen? 

[Deepak Vasudevan]

Looks like this is a bug in Telerik RadGrid as indicated in the thread http://www.telerik.com/community/forums/aspnet-ajax/grid/frozen-column-is-not-working-for-grid-if-tab-is-use-for-navigate.aspx

Is some one from Telerik team available to comment with a working solution containing the workaround please?

[Galin]

Hi Deepak,

There is a workaround of your issue. On the tab event the data container is scrolling with changing the focus of the elements. Therefore, you should add a onScroll handler to this container. Additionally, the observer have to scroll the main scrollBar in the RadGrid.

Use the following JavaScript function

function onGridLoad(sender, args)
{
    var frozenScroll = $get(sender.get_id() + "_Frozen");
    var allColumns = sender.get_masterTableView().get_columns();
    var scrollLeftOffset=0;
    var allColumnsWidth = new Array;

    for (var i = 0; i < allColumns.length; i++)
    {
        allColumnsWidth[i] = allColumns[i].get_element().offsetWidth;
    }

    $get(sender.get_id() + "_GridData").onscroll = function(e)
    {
        for (var i = 0; i < allColumns.length; i++)
        {
            if(!allColumns[i].get_visible())
            {
                scrollLeftOffset += allColumnsWidth[i];
            }
        }
        var thisScrollLeft = this.scrollLeft;
        this.scrollLeft = 0;
        if(thisScrollLeft>0)
            frozenScroll.scrollLeft =  thisScrollLeft + scrollLeftOffset;
        scrollLeftOffset = 0;
    }
}

I have prepared a sample page with this functionality. Please find it in the attached file and let me know how it goes.

Also, please note this is a workaround and still is unsupported scenario. However, our developers are investigating the scenario and they are looking for possible resolution.


Greetings,
Galin
the Telerik team

[Deepak Vasudevan]

Dear Galin,

The solution seems to be fine with IE 9 and Firefox but gives bizarre errors with IE 8 and 7. Any clues?

[Galin]

Hi Deepak,

Could you modify my test project to demonstrate the error and sent it back to me?

Looking forward to your reply.

Regards,
Galin
the Telerik team

[Deepak Vasudevan]

Dear Galin,

The test project as-it-is can be tested for that scenario also. Use IE developer toolbar to change browser mode to IE7 to see the result.

[Galin]

Hi Deepak,

The issue is replicate on our side. Therefore, I have modified the script by adding a IE7 condition in the JS function

function OnGridCreated(sender, args)
{
    var frozenScroll = $get(sender.get_id() + "_Frozen");
    var allColumns = sender.get_masterTableView().get_columns();
    var scrollLeftOffset = 0;
    var allColumnsWidth = new Array;
    var grid = sender.get_element();

    for(var i = 0; i < allColumns.length; i++)
    {
        allColumnsWidth[i] = allColumns[i].get_element().offsetWidth;
    }

    $get(sender.get_id() + "_GridData").onscroll = function (e)
    {
        for(var i = 0; i < allColumns.length; i++)
        {
            console.log(grid.getElementsByTagName("colgroup")[0].getElementsByTagName("col")[0].style.display)
            if(!allColumns[i].get_visible())
            {
                scrollLeftOffset += allColumnsWidth[i];
            }
            if($telerik.isIE7)
            {
                var thisColumn = grid.getElementsByTagName("colgroup")[0].getElementsByTagName("col")[i];
                console.log(thisColumn.style.display);
                if (thisColumn.style.display == "none")
                {
                    scrollLeftOffset += parseInt(thisColumn.style.width);
                }
            }
        }
        var thisScrollLeft = this.scrollLeft;
        if(thisScrollLeft > 0)
            frozenScroll.scrollLeft = thisScrollLeft + scrollLeftOffset + 200;
        this.scrollLeft = 0;
        scrollLeftOffset = 0;
    }
}

Please check it out and let me know how it goes.

Greetings,
Galin
the Telerik team

[Dhamodharan]

Hi Galin,

I checked your code. this is working fine. but i want these functionality in EditMode="inplace". i added these code in your code
<MasterTableView TableLayout="Fixed" EditMode="InPlace" CommandItemDisplay="Top">

But in Editmode Tab functionality is not working. but without editmode tab functionality working fine. how we fix this issue in edit mode. please let us know ASAP.

Thanks in Advance,
Dhamu

[Galin]

Hi Dhamodharan,

I tested the provided workaround in Edit Mode and it works as expected. For reference please check out the attached sample page.

Regards,
Galin
Telerik

 

 

[Dhamodharan]

Hi Galin,

I do not know why it has same issue. it think it may be browser issue. but i chagned your code and it is working fine. Thanks again.

Changed $get(sender.get_id() + "_GridHeader").onscroll = function (e). it is seems good. Thanks your respnse.

[Han]

Hello Galin,

I have your code work fine in the edit mode, but when I try to add a new record, and try to tab through 40 columns, it doesn't work.  I noticed that if I scroll the horizontal scroll bar, then it works but not work when I try to tab even though I have set AllowKeyboardNavigation="true".  Again, it  works perfectly in the edit mode with tab and scroll, but not in the insert mode.

Your help is greatly appreciated.

Han

[Venelin]

Hi Han,

The difference comes from the fact that the insert form is rendered in the header (the edit form is in grid's data div), but the onscroll attached only to the data div, so it is not fired.

Regards,
Venelin
Telerik