Keyboard Navigation
The Kendo UI for Angular Grid provides keyboard navigation support to enhance accessibility and improve user experience. Keyboard navigation is enabled by default to allow users to navigate through the Grid’s sections, including the table, pager, and toolbar, using keyboard shortcuts. This feature is particularly useful for users who rely on keyboard navigation or assistive technologies.
Starting with Kendo UI for Angular v19.0.0, the Grid keyboard navigation is enabled by default. To disable it, set the
navigableproperty tofalse.
The following example demonstrates the Grid keyboard navigation in action:
Keyboard Shortcuts
The Grid supports a variety of keyboard shortcuts to facilitate navigation and interaction with its elements. The shortcuts are designed to be intuitive and consistent with common keyboard navigation patterns.
Grid Table Navigation
The Grid table supports the following keyboard shortcuts:
| SHORTCUT | DESCRIPTION |
|---|---|
Right Arrow | 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. |
Left Arrow | 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. |
Down Arrow | Moves the focus one cell down. If the focus is on the bottom-most cell in the column, the focus does not move. |
Up Arrow | Moves the focus one cell up. If the focus is on the top-most cell in the column, the focus does not move. |
Page Down | Scrolls to the next page of data. If paging is configured, loads the next page of data, if any. If virtual scrolling is used, scrolls down with the number of visible items. |
Page Up | Scrolls to the previous page of data. If paging is configured, loads the previous page of data, if any. If virtual scrolling is used, scrolls up with the number of visible items. |
Home | Moves the focus to the first focusable cell in the row. |
End | Moves the focus to the last focusable cell in the row. |
Ctrl/Cmd(MacOS) & Home | Moves the focus to the first cell in the first row. |
Ctrl/Cmd(MacOS) & End | Moves the focus to the last cell in the last row. |
Ctrl/Cmd(MacOS) & Down Arrow | Moves the focus five cells down. If there are less than five cells until the end of the column, the focus does not move. |
Ctrl/Cmd(MacOS) & Up Arrow | Moves the focus five cells up. If there are less than five cells until the start of the column, the focus either does not move or goes to a cell in the header or the filter row. |
Ctrl/Cmd(MacOS) + Shift + Up Arrow | Reorders the row with the previous row when such is present. |
Ctrl/Cmd(MacOS) + Shift + Down Arrow | Reorders the row with the next row when such is present. |
Column Header Navigation
The Grid column header cells support the following keyboard shortcuts:
| SHORTCUT | DESCRIPTION |
|---|---|
Enter | If the column is sortable, triggers the action associated with clicking the header cell - either sorts the data by the respective field, changes the sorting direction, or unsorts, depending on current state and configuration. |
Alt & Down Arrow | Opens the Filter or Column Menu when the respective header cell is focused. Traps the focus within the opened menu container. |
Ctrl & Space / Cmd & Enter(MacOS) | If the column is groupable, groups/ungroups the data by the column field. |
Ctrl/Cmd(MacOS) & Right Arrow | Reorders the column with the next one (if such is available). |
Ctrl/Cmd(MacOS) & Left Arrow | Reorders the column with the previous one (if such is available). |
Alt/Option(MacOS) & Right Arrow | If the column is resizable, resizes the column and increases its width. |
Alt/Option(MacOS) & Left Arrow | If the column is resizable, resizes the column and decreases its width. |
Filter Menu Navigation
The Grid Filter Menu supports the following keyboard shortcuts*:
| SHORTCUT | DESCRIPTION |
|---|---|
Alt & Down Arrow | Opens the Filter Menu when the respective header cell is focused. Traps the focus within the opened menu container. |
Escape | Closes the Filter Menu and returns the focus to its parent header cell. |
Tab | Moves the focus to the next focusable menu element. When tabbing out of the last element, the first element is focused. |
Shift & Tab | Moves the focus to the previous focusable menu element. When shift-tabbing out of the first element, the last element is focused. |
Enter | Triggers filtering by the current criteria and closes the menu when the filter is not empty. |
* All inner Filter Menu components follow their own keyboard navigation behavior when focused.
Column Menu Navigation
The Grid Column Menu supports the following keyboard shortcuts*:
| SHORTCUT | DESCRIPTION |
|---|---|
Alt & Down Arrow | Opens the Column Menu when the respective header cell is focused. Traps the focus within the opened menu container. |
Escape | Closes the Column Menu and returns the focus to its parent header cell. |
Tab | Moves the focus to the next focusable menu element. When tabbing out of the last element, the first element is focused. |
Shift & Tab | Moves the focus to the previous focusable menu element. When shift-tabbing out of the first element, the last element is focused. |
Enter | Triggers the default action, associated with the focused menu item or expands/collapses an expandable item like the Filter, Column Chooser, and Set Column Position items. |
* All inner components within the column menu Filter item follow their own keyboard navigation behavior when focused.
Pager Navigation
The Grid Pager supports the following keyboard shortcuts*:
| SHORTCUT | DESCRIPTION |
|---|---|
Enter | When the Pager wrapper is focused, moves the focus to the first focusable pager element. When an inner Pager element is focused, triggers the default action, associated with this element. |
Escape | When an inner Pager element is focused, brings the focus to the Pager wrapper. If the focused inner component has an open popup, Escape will close the popup. Pressing Escape again will focus the Pager wrapper. |
Tab | When an inner Pager element is focused, moves the focus between the focusable Pager elements sequentially. The focus is trapped and tabbing out of the last focusable element, focuses the first focusable element. |
Shift & Tab | When an inner Pager element is focused, moves the focus between the focusable Pager elements sequentially in reversed order. The focus is trapped and shift-tabbing out of the first focusable element, focuses the last focusable element. |
Left Arrow or Page Up | When the Pager wrapper is focused, loads the previous page of data, if any. |
Right Arrow or Page Down | When the Pager wrapper is focused, loads the next page of data, if any. |
Home | When the Pager wrapper is focused, loads the first page of data (if the current page is not the first one). |
End | When the Pager wrapper is focused, loads the last page of data (if the current page is not the last one). |
* All inner components within the Pager follow their own keyboard navigation behavior when focused.
Default Toolbar Navigation
The default Grid toolbar supports the following keyboard shortcuts*:
| SHORTCUT | DESCRIPTION |
|---|---|
Left/Right Arrow | Focuses the previous/next focusable element in the toolbar. Focus is wrapped, meaning it will go from the last to first focusable element and vice-versa depending on the end user action. |
Tab | Focuses the next navigable Grid section, or the next focusable element on the page. |
Shift + Tab | Focuses the previous navigable Grid section, or the previous focusable element on the page. |
* All inner components within the toolbars follow their own keyboard navigation behavior when focused.
Custom Toolbar Navigation
When using the ToolBar component instead the default toolbar, the Grid supports the following keyboard shortcuts*:
| SHORTCUT | DESCRIPTION |
|---|---|
Left Arrow & Right Arrow | Moves the focus to the next available tool that can be focused. |
Enter | Clicks the currently active button or changes the state of the currently active toggleable button. |
Tab | Moves the focus to and from the ToolBar. |
Alt+Down Arrow | Opens the currently active SplitButton or DropDownButton. |
Alt+Up Arrow | Closes the currently active SplitButton or DropDownButton. |
Home | Moves focus to the first focusable tool. |
End | Moves focus to the last focusable tool. |
Escape | Closes the currently active SplitButton or DropDownButton. |
* All inner components within the toolbars follow their own keyboard navigation behavior when focused.
Focusable Components
When a Grid cell contains focusable components, the Grid supports the following shortcuts:
| SHORTCUT | DESCRIPTION |
|---|---|
Enter or F2 | Disables the keyboard navigation of the Grid and places the focus on the first widget. |
Escape | Restores the keyboard navigation of the Grid. If the content was in the process of editing, the unsaved edits are removed. |
Tab | Moves the focus to the next focusable component in the current row. |
Shift & Tab | 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. |
Row Selection Shortcuts
When row selection is enabled, the Grid supports the following keyboard shortcuts:
| SHORTCUT | DESCRIPTION |
|---|---|
Enter | Selects the row that contains the focused cell. |
Ctrl/Cmd(MacOS) + Enter | Toggles the selection of the focused row (select if unselected, deselect if selected). |
Shift + Enter | Selects a range of rows from the previously selected row to the focused row. |
For single and multiple row selection modes, configuration options, mouse interactions, and mobile touch interactions, see the Row Selection article.
Cell Selection Shortcuts
When cell selection is enabled, the Grid supports the following keyboard shortcuts:
| SHORTCUT | DESCRIPTION |
|---|---|
Enter | Selects the focused cell. |
Ctrl/Cmd(MacOS) + Enter | Toggles the selection of the focused cell (select if unselected, deselect if selected). |
Shift + Enter | Selects a range of cells from the previously selected cell to the focused cell. |
For single and multiple cell selection modes, configuration options, and mouse interactions, see the Cell Selection article.
Focusing Elements in Templates
According to the accessibility guidelines, only one focusable element within the Grid can be included in the page Tab sequence. To control which elements you can access through the Tab key, the Grid implements a roving tabindex. To meet this requirement, all other focusable elements receive a tabindex of "-1" and are excluded from the Tab sequence.
To track focusable elements in templates and provide an interface for controlling their focused state and tabindex, use the following directives with the desired components:
kendoGridFocusable—Controls how focusable elements receive focus in a navigable Grid.kendoGridToolbarFocusable—Controls how focusable elements receive focus in the Grid toolbar. For more details, refer to Focusing Elements in Toolbar Templates.
The following example demonstrates how to decorate a button inside a template by using the kendoGridFocusable directive. The button is excluded from the page Tab sequence but can still receive focus by using the Arrow keys inside the Grid.
You can apply the directives to regular input elements (inputs, buttons) and composite components (drop-down lists). Use the available keyboard shortcuts to move focus between cells. When a cell contains a single focusable element (button or checkbox), focus moves directly to that element, which allows immediate interaction without entering the cell first.
To include cell elements in the Tab sequence, such as one cell at a time or an entire row during editing mode, see the Controlling the Focus section.
Navigable Sections
By default, when the keyboard navigation of the Grid is enabled, it allows the user to navigate through all of its sections. You can control this behavior and enable the keyboard navigation for a specific section only. To achieve this, pass an array of one or multiple navigable sections to the navigable option of the Grid. For example, if only the Grid pager has to be navigable, set the option to ['pager'].
The Grid consists of the following navigable sections:
table—Includes the columns and headers of the Grid tablepager—Includes the Grid pager and its internal elementstoolbar—Includes the Grid toolbars and the group panel when the Grid isgroupable.
The focusable elements within the non-navigable section will follow the natural tab sequence of the page.
The following example demonstrates how to enable the keyboard navigation for the pager section only.
Controlling the Focus
To control the focus in the Grid, use any of the following methods:
You can query the cell and row which are currently focused by using the activeCell and activeRow properties. When the Grid has no focused elements, these properties are undefined.
The following example demonstrates how to use the focus methods to implement the Tab key navigation with in-cell editing.