Navigating Through Hierarchical Grid Rows with Tab Key

Environment

Product	Telerik UI for ASP.NET Core Grid
Version	2024.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.
    )

Razor

    @addTagHelper *, Kendo.Mvc

    <kendo-grid name="grid" navigatable="true" detail-template-id="clientDetailTemplate">
        <!-- Additional configuratiion. -->
    </kendo-grid>

JS

    <script>
        $(document).ready(function () {
            var grid = $('#grid').data('kendoGrid');

            grid.table.on("click", ".k-hierarchy-cell", function () {
                grid.current($(this)); // Focus the expanding arrow cell when clicked.
            });

            grid.table.on('keydown', function (e) {
                if (e.keyCode === 9) { // Check if Tab key is pressed.
                    e.preventDefault();
                    var currentCell = grid.current(); // Get the current table cell.
                    var nextRow = $(currentCell).closest("tr").next(); // Get the next row element.
                    var cellOnNextRow = $(nextRow).find(`td:first`); // Get the first cell on the next row.
                    grid.current(cellOnNextRow); // Focus the cell with the expanding arrow.
                }
            });
        });
    </script>

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

• Sample code with the Grid HtmlHelper
• Sample code with the Grid TagHelper

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core DataGrid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Server-Side API Reference of the Grid for ASP.NET Core

• Server-Side TagHelper API Reference of the Grid for ASP.NET Core

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base