This is a migrated thread and some comments may be shown as answers.

Grid arrow row selection

8 Answers 59 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Matej
Top achievements
Rank 1
Veteran
Matej asked on 03 Sep 2020, 03:38 PM

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?

8 Answers, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 04 Sep 2020, 12:29 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Matej
Top achievements
Rank 1
Veteran
answered on 04 Sep 2020, 01:27 PM
Thanks. But I can not add tab index to row because it needs to work also in virtual grids.
0
Stefan
Telerik team
answered on 07 Sep 2020, 12:39 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Matej
Top achievements
Rank 1
Veteran
answered on 07 Sep 2020, 01:14 PM
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. 
0
Stefan
Telerik team
answered on 08 Sep 2020, 12:14 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Matej
Top achievements
Rank 1
Veteran
answered on 08 Sep 2020, 01:44 PM
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. 
0
Accepted
Stefan
Telerik team
answered on 09 Sep 2020, 10:41 AM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

0
Matej
Top achievements
Rank 1
Veteran
answered on 16 Sep 2020, 07:18 AM
Thank you, your examples are very helpful.
Tags
General Discussions
Asked by
Matej
Top achievements
Rank 1
Veteran
Answers by
Stefan
Telerik team
Matej
Top achievements
Rank 1
Veteran
Share this question
or