Grid arrow row selection

[Matej]

Hi,

I followed your toc-single-row-navigation example. Here is my grid https://stackblitz.com/edit/react-njk8q2?file=app/main.jsx and problem is that when are data filtered then arrows are moving row selection but also the page. Any suggestion how to prevent the page scroll?

[Stefan]

Hello, Matej,

This is expected behavior as when the Grid has fewer records and it is not scrollable, the arrow keys will scroll the page. The can be observed by pressing the keys over any non-scrollable container.

In this case, we can suggest preventing the default behavior when these keys are pressed. This will not scroll the scrollable Grid as well, and we can use additional logic to focus the selected rows.

This can be done by adding a tab index to the rows using rowRender and focusing the selected row on componentDidUpdate:

https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-rowrender

I updated the example to showcase this:

https://stackblitz.com/edit/react-njk8q2-qlvomy?file=app/main.jsx

Regards,
Stefan
Progress Telerik

[Matej]

Thanks. But I can not add tab index to row because it needs to work also in virtual grids.

[Stefan]

Hello, Matej,

Could you please share the specific issue that occurs when adding a tabIndex to the rows when the virtualization is used?

Regards,
Stefan
Progress Telerik

[Matej]

Here https://www.telerik.com/forums/focusable-rows-in-kendo-grid . You said it is currently not possible to use focusable row with a virtual scroll grid. 

[Stefan]

Hello, Matej,

Thank you for the clarification.

The case in the linked forum is a little different as the programmatical focus in the current case is scrolling the Grid table which triggers onPageChange and the new records are loaded:

https://stackblitz.com/edit/react-fddyfv?file=app%2Fmain.jsx

Still, there is an issue scrolling up, as with virtual scrolling, we pre-render records under the visible ones which allow us to scroll down, but scrolling up, we only have the records based on the skip value, and there are no records to scroll up to.

We have an idea to pre-render records at the top as well, I added this use case there as well to raise the priority:

https://feedback.telerik.com/kendo-react-ui/1407584-allow-setting-a-number-of-records-to-be-pre-rendered-in-the-grid-with-virtual-scrolling

Regards,
Stefan
Progress Telerik

[Matej]

Mouse scroll up is also "fighting" the focused row. Different question, In you example Single Row Navigation have you ever try to synchronize the arrow scroll and the selected row across different browsers? In chrome it is ok but in firefox the focused row is outside of the visible area almost immediately. 

[Stefan]

Hello, Matej,

The sync can be done by using the approach to programmatically focus the selected row. As otherwise how much the table will scroll when pressing the arrow button will entirely depend on the browser.

Another option will be to have a fixed rowHeight, prevent the default behavior when the arrows are pressed , and programmatically scroll the table with steps equal of the rowHeight.

I made an example showcasing this:

https://stackblitz.com/edit/react-tewjqu?file=app/main.jsx

Regards,
Stefan
Progress Telerik

[Matej]

Thank you, your examples are very helpful.