New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Navigating Through Hierarchical Grid Rows with Tab Key

Environment

Product Telerik UI for ASP.NET MVC 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.
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
        .Name("grid")
        .ClientDetailTemplateId("clientDetailTemplate")
        .Navigatable()
        ...// Additional configuratiion.
    )
    <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 REPL example on vertically tabbing through the hierarchy cells of the Grid.

More ASP.NET MVC Grid Resources

See Also

In this article