All Components
Change Theme

SASS Themes (beta)

    LESS Themes

      SASS Theme Builder

      Create new or customize SASS themes
      Launch Theme Builder

      TreeList / Keyboard navigation

      Focus

      • Alt + w focuses the widget

      Actions applied on TreeList header

      • Enter sort by the column

      Actions applied on TreeList data table

      • Arrow Keys to navigate over the cells
      • Space selects the row holding the currently highlighted cell
      • Ctrl + Space selects or deselects the current row, while persisting previously selected rows (only for selection mode "multiple")
      • Shift + Space performs range selection, selects all the rows between the last selected one (with SPACE or mouse click) and the one holding the focused cell
      • Shift + Arrow Keys adds the row which holds the focused cell to the selection (only for selection mode "multiple")
      • Enter or F2 Puts the item in edit mode, if performed over a command column will focus the first focusable element inside it.
      • Esc Cancels the edit or returns the focus to the table if an element inside a cell is focused.
      • Alt + Right Arrow Expands the current item.
      • Alt + Left Arrow Collapses the current item.
      • Ctrl + Home Focuses the first focusable element inside the body
      • Ctrl + End Focuses the last focusable element inside the body
      • Home Focuses the first focusable cell in the row
      • End Focuses the last focusable cell in the row

      Description

      This demo illustrates the keyboard support of the Kendo UI treelist widget, which provides quick access to available treelist features without the need to interact with mouse. Furthermore, applications which must cover accessibility standards for people with disabilities can directly benefit from it.

      You can focus the treelist using the ALT + W key combination, and then use the keyboard key shortcuts visualized above to interact with the widget.

      Further details about the keyboard support of the Kendo UI treelist widgets can be found in the Accessibility section of the documentation.

      HTML5/JavaScript source

      Also available for:

      API Reference
      • keyboard-navigation.html
      • Sample service
      • Widget configuration

      Support & learning resources

      TreeList for other technologies