New to Telerik UI for ASP.NET CoreStart a free 30-day trial

Navigating Through Hierarchical Grid Rows with Tab Key

Environment

ProductTelerik UI for ASP.NET Core Grid
Version2024.3.1015

Description

How can I enable Tab key navigation through the expanding arrows of the parent rows in a hierarchical Grid?

The Navigatable() option enables the keyboard navigation functionality of the Grid. When you focus on a cell that holds the expanding arrow of the parent row, you can use the Arrow keys to navigate through the expanding arrow cells vertically. In this article, you will learn how to implement a custom JavaScript logic to allow Tab key navigation through the cells with the expanding arrows.

Solution

  1. Enable the keyboard navigation functionality of the Grid by setting the Navigatable() in your Grid configuration.
  2. Handle the click event on the Grid's table cells with class k-hierarchy-cell and set the clicked cell as a current focused cell in the Grid.
  3. Handle the keydown event on the Grid's table. When the Tab key is pressed, prevent the default event action and manually set the focus to the expanding arrow cell of the next row.
Razor
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
        .Name("grid")
        .ClientDetailTemplateId("clientDetailTemplate")
        .Navigatable()
        ...// Additional configuratiion.
    )

For a runnable example based on the code above, refer to the following REPL samples:

More ASP.NET Core Grid Resources

See Also