New to Kendo UI for Angular? Start a free 30-day trial

Keyboard Navigation

By default, the keyboard navigation of the Kendo UI Grid for Angular is disabled. To enable keyboard navigation, set the navigable attribute to true.

Dynamically changing the navigable property is not supported.

The Grid supports the following keyboard shortcuts:

SHORTCUTDESCRIPTION
Right ArrowMoves 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 ArrowMoves 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 ArrowMoves the focus one cell down. If the focus is on the bottom-most cell in the column, the focus does not move.
Up ArrowMoves the focus one cell up. If the focus is on the top-most cell in the column, the focus does not move.
Page DownScrolls to the next page of data. If paging is configured, loads the next page of data, if any.
Page UpScrolls to the previous page of data. If paging is configured, loads the previous page of data, if any.
HomeMoves the focus to the first focusable cell in the row.
EndMoves the focus to the last focusable cell in the row.
Ctrl & HomeMoves the focus to the first cell in the first row.
Ctrl & EndMoves the focus to the last cell in the last row.

The Grid column header cells support the following keyboard shortcuts:

SHORTCUTDESCRIPTION
EnterIf 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 ArrowOpens 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) & RightArrowReorders the column with the next one (if such is available).
Ctrl/Cmd(MacOS) & LeftArrowReorders the column with the previous one (if such is available).

The Grid Filter Menu supports the following keyboard shortcuts*:

SHORTCUTDESCRIPTION
Alt & Down ArrowOpens the Filter Menu when the respective header cell is focused. Traps the focus within the opened menu container.
EscapeCloses the Filter Menu and returns the focus to its parent header cell.
TabMoves the focus to the next focusable menu element. When tabbing out of the last element, the first element is focused.
Shift & TabMoves the focus to the previous focusable menu element. When shift-tabbing out of the first element, the last element is focused.
EnterTriggers 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.

The Grid Column Menu supports the following keyboard shortcuts*:

SHORTCUTDESCRIPTION
Alt & Down ArrowOpens the Column Menu when the respective header cell is focused. Traps the focus within the opened menu container.
EscapeCloses the Column Menu and returns the focus to its parent header cell.
TabMoves the focus to the next focusable menu element. When tabbing out of the last element, the first element is focused.
Shift & TabMoves the focus to the previous focusable menu element. When shift-tabbing out of the first element, the last element is focused.
EnterTriggers 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.

The Grid Pager supports the following keyboard shortcuts*:

SHORTCUTDESCRIPTION
EnterWhen 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.
EscapeWhen 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.
TabWhen 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 & TabWhen 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 UpWhen the Pager wrapper is focused, loads the previous page of data, if any.
Right Arrow or Page DownWhen the Pager wrapper is focused, loads the next page of data, if any.
HomeWhen the Pager wrapper is focused, loads the first page of data (if the current page is not the first one).
EndWhen 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.

The Grid toolbars support the following keyboard shortcuts*:

SHORTCUTDESCRIPTION
Left/Right ArrowFocuses 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.
TabFocuses the next navigable Grid section, or the next focusable element on the page.
Shift + TabFocuses 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.

When a Grid cell contains focusable components, the Grid supports the following shortcuts:

SHORTCUTDESCRIPTION
Enter or F2Disables the keyboard navigation of the Grid and places the focus on the first widget.
EscapeRestores the keyboard navigation of the Grid. If the content was in the process of editing, the unsaved edits are removed.
TabMoves the focus to the next focusable component in the current row.
Shift & TabMoves the focus to the previous focusable component in the current row.
Alphanumeric keysIf the cell contains editable content, places the focus in an input field—for example, a textbox.
Example
View Source
Change Theme:

Basic Concepts

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 Tab sequence.

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.

Example
View Source
Change Theme:

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 table
  • pager—Includes the Grid pager and its internal elements
  • toolbar—Includes the Grid toolbars and the group panel when the Grid is groupable.

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.

Example
View Source
Change Theme:

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.

Example
View Source
Change Theme: