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
- Enable the keyboard navigation functionality of the Grid by setting the
Navigatable()
in your Grid configuration. - Handle the
click
event on the Grid's table cells with classk-hierarchy-cell
and set the clicked cell as a current focused cell in the Grid. - Handle the
keydown
event on the Grid's table. When theTab
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.