Grid arrow row selection

9 posts, 2 answers
  1. Matej
    Matej avatar
    71 posts
    Member since:
    Jun 2019

    Posted 03 Sep 2020 Link to this post

    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?

  2. Answer
    Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 04 Sep 2020 Link to this post

    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/.

  3. Matej
    Matej avatar
    71 posts
    Member since:
    Jun 2019

    Posted 04 Sep 2020 in reply to Stefan Link to this post

    Thanks. But I can not add tab index to row because it needs to work also in virtual grids.
  4. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 07 Sep 2020 Link to this post

    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/.

  5. Matej
    Matej avatar
    71 posts
    Member since:
    Jun 2019

    Posted 07 Sep 2020 in reply to Stefan Link to this post

    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. 
  6. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 08 Sep 2020 Link to this post

    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/.

  7. Matej
    Matej avatar
    71 posts
    Member since:
    Jun 2019

    Posted 08 Sep 2020 in reply to Stefan Link to this post

    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. 
  8. Answer
    Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 09 Sep 2020 Link to this post

    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).

  9. Matej
    Matej avatar
    71 posts
    Member since:
    Jun 2019

    Posted 16 Sep 2020 in reply to Stefan Link to this post

    Thank you, your examples are very helpful.
Back to Top