Hi,
I am facing a problem that the page will be scrolled automatically.
This problem will occur at the occasion that Grid is in batch editing mode(editable: true) and keyboard navigation is active(navigatable: true).
When I focusing a cell, and then trying to lost focus by pressing enter key or tab key,
the gird will be scrolled to the top of the page.
This behavior is not friendly for my users since they have to find the cell when the edit finished,
but the keyboard navigation is very useful for them (such as pressing tab key to jump to the next cell).
So is there any way to prevent page scrolling without disabling keyboard navigation function?
I have created a sample to reproduce this behavior in attachment.
You can open the file located in <./demo/grid/editing-custom(preventScrolling).html> to check it.
5 Answers, 1 is accepted
Hello Kiriya,
The behavior is expected, because the current dataSource has it's autoSync property set to true. This means that after each change the Grid table is redrawn with the new data, meaning that the previous cell will not exist there anymore. A sample solution would be use the save event to store the index of the last edited cell and then use the dataBound event handler to set it as active again using the current method of the Grid API. Here is an example that demonstrates the approach.
Regards,Dimiter Madjarov
Telerik
Rank 1
Hi Dimiter,
Thank you for your reply.
I think you may misunderstand me by my poor English.
The behavior what I want is that when a edit is finished on a cell, the page will be not scrolled -- the position of the grid in the window will not be changed.
In my sample, when I finished edit by pressing tab or enter key, the position of grid will be moved to the top of the window even I set the autoSync property to false.
Is there any way to keep the position of the grid in the window?
Best Regards
Hello Kiriya,
I am unable to reproduce movement of the Grid on the page. Could you elaborate in which browser is the behavior observed? If possible please send us small screencast to demonstrate the issue.
Regards,Dimiter Madjarov
Telerik
Rank 1
Hello Dimiter,
Thank you for your reply.
The browser I used is Chrome(v43.0.2347.132m).
I noticed that the problem can not be reproduced in IE11.
I reproduced this problem by Chrome and took the screen cast.Please check it in attachment files.
Hello Kiriya,
The mentioned behavior is expected. When the editing is finished, the focus of the page goes to the Grid table element, which the browser tries to scroll into view in order to make it visible. This is why it scrolls either to the first row or to the top of the page if the first row is currently not visible. The custom solution would be to store the Grid scroll position and then restore it when needed, but the implementation would be tricky as the user may scroll before or during the editing.
Regards,Dimiter Madjarov
Telerik