Grid arrow row selection

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

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

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

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