This is a migrated thread and some comments may be shown as answers.
Freezing Edit/Update-Cancel in RadGrid
11 Answers 72 Views
This is a migrated thread and some comments may be shown as answers.
Deepak Vasudevan
Top achievements
Rank 2
Deepak Vasudevan asked on 18 Feb 2012, 02:04 PM
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? 

11 Answers, 1 is accepted

Sort by
0
Deepak Vasudevan
Top achievements
Rank 2
answered on 21 Feb 2012, 02:51 PM
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?
0
Galin
Telerik team
answered on 23 Feb 2012, 12:49 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Deepak Vasudevan
Top achievements
Rank 2
answered on 23 Feb 2012, 06:10 PM
Dear Galin,

The solution seems to be fine with IE 9 and Firefox but gives bizarre errors with IE 8 and 7. Any clues?
0
Galin
Telerik team
answered on 28 Feb 2012, 04:45 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Deepak Vasudevan
Top achievements
Rank 2
answered on 28 Feb 2012, 05:55 PM
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.
0
Galin
Telerik team
answered on 05 Mar 2012, 08:53 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Dhamodharan
Top achievements
Rank 1
answered on 11 Nov 2014, 08:16 AM
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
0
Galin
Telerik team
answered on 13 Nov 2014, 02:52 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Dhamodharan
Top achievements
Rank 1
answered on 14 Nov 2014, 06:19 AM
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.

0
Han
Top achievements
Rank 1
answered on 04 Mar 2015, 08:07 PM
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
0
Venelin
Telerik team
answered on 09 Mar 2015, 03:30 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Deepak Vasudevan
Top achievements
Rank 2
Answers by
Deepak Vasudevan
Top achievements
Rank 2
Galin
Telerik team
Dhamodharan
Top achievements
Rank 1
Han
Top achievements
Rank 1
Venelin
Telerik team
Share this question
or