Grid Keyboard Navigation for Sorting, Filtering and Paging

2 posts, 1 answers
  1. David
    David avatar
    25 posts
    Member since:
    Sep 2019

    Posted 08 Dec 2020 Link to this post

    Hi,

    We are using a KendoReact Grid with pageable and sortable options enabled, and columnMenus for specific columns requiring filtering. We are using the columnMenu approach because we are using the GridColumnMenuCheckboxFilter as recommended here: https://www.telerik.com/kendo-react-ui/components/grid/filtering/

    I have some questions regarding keyboard navigation:

    1. The column headers are keyboard-focusable by default and allow for navigation using the Tab key and sorting using the Enter key, however there is no visual indication of which heading has focus. Is there a style that can be set to achieve this?
    2. The paging controls are keyboard-focusable by default and allow for navigation using the Tab key and paging using the Enter key, however there is no visual indication of which control has focus. Is there a style that can be set to achieve this?
    3. We used css to relocate the paging controls to the top of the grid, but they still come after the column headers in keyboard navigation order. Is there anything that can be done to change this?
    4. The column menus are not keyboard-focusable by default, is there anything that can be done to change this?

    Kind regards,

    David

  2. Answer
    Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 08 Dec 2020 Link to this post

    Hello, David,

    We are working on a large task that adds keyboard navigation logic + styles to the Grid and its elements.

    The task is currently on a pull request and it is already in a testing phase.

    It is planned for the next release (min January).

    Once it is ready we will have official demos showcasing and it will be set up and how it is expected to work.

    I have made a public item for this task, and we will update it once the feature is live:

    https://github.com/telerik/kendo-react/issues/802

    If there are still issues after the new feature is live, please let me know and we will discuss them with the team.

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

Back to Top