
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?
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
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?
Is some one from Telerik team available to comment with a working solution containing the workaround please?
0
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
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
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?
The solution seems to be fine with IE 9 and Firefox but gives bizarre errors with IE 8 and 7. Any clues?
0
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
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.
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
Hi Deepak,
The issue is replicate on our side. Therefore, I have modified the script by adding a IE7 condition in the JS function
Please check it out and let me know how it goes.
Greetings,
Galin
the Telerik team
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
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
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
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.
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
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
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
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.