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

Keyboard Navigation

By default, the keyboard navigation of the Kendo UI Gantt for Angular is disabled. To enable keyboard navigation, set the navigable attribute to true. The main interactable parts of the Gantt are reachable through the keyboard - the Toolbar, TreeList, Splitter and Timeline.

Basic Concepts

According to the accessibility guidelines for the treegrid and tree roles, only one of the focusable elements in each of the two sections has to be included in the Tab sequence of the page.

To control which elements will be accessible through the Tab key, the Gantt implements a roving tabindex for both the TreeList cells and the Timeline tasks. All other focusable elements receive a tabindex of "-1" and get excluded from the Tab sequence.

Example
View Source
Change Theme:

Available Shortcuts

When the TreeList is focucused, the following keyboard commands are available:

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.
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.
Alt & Right ArrowExpands the current row, if applicable.
Alt & Left ArrowCollapses the current row, if applicable.
EnterExpands or collapses the current row, if pressed on an expandable, non-editable column; triggers the cell click action.
Digit 1, Digit 2, Digit 3Changes the currently active view to the one at the corresponding position.

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

SHORTCUTDESCRIPTION
EnterDisables the keyboard navigation of the Gantt and places the focus on the first widget.
EscapeRestores the keyboard navigation of the Gantt. 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.

When the Timeline is focucused, the following keyboard commands are available:

SHORTCUTDESCRIPTION
Right ArrowMoves the scrollable content to the right.
Left ArrowMoves the scrollable content to the left.
Down ArrowMoves the focus one task down. If the focus is on the bottom-most taks, the focus does not move.
Up ArrowMoves the focus one task up. If the focus is on the top-most taks, the focus does not move.
HomeMoves the focus to the first task.
EndMoves the focus to the last task.
Alt & Right ArrowExpands the current task, if applicable.
Alt & Left ArrowCollapses the current task, if applicable.
EnterTriggers the task click action.
Digit 1, Digit 2, Digit 3Changes the currently active view to the one at the corresponding position.

When Selection is enabled, the both the Gantt TreeList and Timeline supports the following shortcuts:

SHORTCUTDESCRIPTION
SpaceSelects the current row or task.
Ctrl & SpaceToggles the selection of the current row or task.

Controlling the Focus

To control the focus in the Gantt, use any of the following methods:

The following example demonstrates how to use the focus related methods.

Example
View Source
Change Theme: