To avoid possible interference issues with existing applications, the keyboard navigation of the Grid is currently disabled by default and will remain so in the 4.x Grid versions. Future major releases may enable it to make the Grid keyboard accessible by default.
By default, the keyboard navigation of the Kendo UI Grid for Angular is disabled. To enable keyboard navigation, set the
navigable attribute to
The Grid supports the following keyboard shortcuts:
|Moves the focus one cell to the right. If the focus is on the right-most cell in the row, the focus does not move.|
|Moves the focus one cell to the left. If the focus is on the left-most cell in the row, the focus does not move.|
|Moves the focus one cell down. If the focus is on the bottom-most cell in the column, the focus does not move.|
|Moves the focus one cell up. If the focus is on the top-most cell in the column, the focus does not move.|
|Scrolls to the next page of data. If paging is configured, loads the next page of data, if any.|
|Scrolls to the previous page of data. If paging is configured, loads the previous page of data, if any.|
|Moves the focus to the first focusable cell in the row.|
|Moves the focus to the last focusable cell in the row.|
|Moves the focus to the first cell in the first row.|
|Moves the focus to the last cell in the last row.|
When a Grid cell contains focusable components, the Grid supports the following shortcuts:
|Disables the keyboard navigation of the Grid and places the focus on the first widget.|
|Restores the keyboard navigation of the Grid. If the content was in the process of editing, the unsaved edits are removed.|
|Moves the focus to the next focusable component in the current row.|
|Moves the focus to the previous focusable component in the current row.|
|Alphanumeric keys||If the cell contains editable content, places the focus in an input field—for example, a textbox.|
According to the accessibility guidelines, only one of the focusable elements which are contained by the Grid has to be included in the
Tab sequence of the page.
To control which elements will be accessible through the
Tab key, the Grid implements a roving tabindex. All other focusable elements receive a tabindex of
"-1" and get excluded from the
To implement this requirement, all elements which can receive focus either through the
Tab sequence or through direct interaction must be decorated with the
kendoGridFocusable directive. It registers the focusable elements with the Grid and provides an interface for controlling their focused state and tabindex. The directive can be applied to both regular
input elements, such as inputs and buttons, and composite components, such as drop-down lists. Based on the user actions, the Grid will include the focused (selected) element in the
Tab sequence. Typically, this element is one single cell at a time but when the Grid is in editing mode, it can also be an entire row.
The user can move the focus from cell to cell by using the available shortcut keys. If a cell contains a single focusable element, such as a button or a checkbox, the focus will be applied directly to the element. This behavior allows the user to interact with it without having to enter the cell first.
The following example demonstrates how to decorate a button inside a template by using
kendoGridFocusable. The button will be excluded from the page
Tab sequence, but can still be focused by using the
Arrow keys inside the Grid.
To control the focus in the Grid, use any of the following methods:
The following example demonstrates how to use the
focus methods to implement the
Tab key navigation with in-cell editing.