DropDownTree Component - Keyboard Navigation

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

The keyboard navigation of the DropDownTree is always available.

The DropDownTree supports the following keyboard shortcuts:

SHORTCUT	DESCRIPTION
`Up Arrow`	Moves the focus to the previous focusable item without opening or closing an item.
`Down Arrow`	Moves the focus to the next focusable item without opening or closing an item.
`Left Arrow`	Closes an open, focused item. Moves the focus from an end or closed child item to the parent item. Does nothing when the focus is on an end or closed root item.
`Right Arrow`	Opens a closed, focused item. Does not move the focus. Moves the focus from an open and focused item to its child item. Does nothing when the focus is on an end item.
`Enter`	Opens the popup or selects the highlighted item if the popup is already open.
`Esc`	Closes the popup.
`Home`	Moves the focus to the first item in the tree without opening or closing a item.
`End`	Moves the focus to the last focusable item in the tree without opening or closing an item.
`Alt`+`Down Arrow`	Opens the popup.
`Alt`+`Up Arrow`	Closes the popup.

Example

View Source

Change Theme:

When the popup of the DropDownTree is opened, it adopts the same keyboard shortcuts as the keyboard shortcuts of a selectable TreeView.

Keyboard Navigation