New to Telerik UI for Blazor? Download Free 30-day trial

TreeList - Keyboard Navigation

  • Keyboard-navigation.razor
  • EmployeeDirectoryService.cs
  • EmployeeDirectoryDto.cs
Loading the demo source code...please wait.

Focus

  • Alt + W focuses the first component in the example

Supported keys and user actions

Tab Focus

The Tab key moves focus through all focusable elements on the page and the treelist does not block it - it uses roving tab index for its data portion.

This means that you can go through the treelist toolbar and filter row with the Tab key, then the focus goes through the data portion of the treelist and you can navigate through the cells and rows with the arrow keys. To focus the pager, use the down arrow key from the last row.

Pressing Tab from the data portion will move the focus to the next focusable element on the page - this can be some focusable element in the currently focused row (like a button or an input in a cell or template), or the next focusable element on the page after the treelist (depending on the tab order of the page).

Toolbar

The toolbar of the treelist is a template, and it is within the TabIndex of the treelist, so you do not need to defined explicit TabIndex attributes to elements inside it. Doing so may put them after the treelist in the general tab order of the page.

Table

  • Right Arrow moves focus one cell to the right.
  • Left Arrow moves focus one cell to the left.
  • Down Arrow moves focus one cell down.
  • Up Arrow moves focus one cell up.
  • Page Down TreeListScrollMode is configured - scrolls with one page down. Pageable - loads next page
  • Page Up TreeListScrollMode is configured - scrolls with one page up. Pageable - loads previous page
  • Home moves focus to the first cell in the row that contains focus.
  • End moves focus to the last cell in the row that contains focus.
  • Ctrl/Cmd + Home moves focus to the first cell in the TreeList.
  • Ctrl/Cmd + End moves focus to the last cell in the last loaded row of the TreeList.
  • Space selects a row. Second hit on Space should unselect the whole selection. Applicable only when row selection happens through the entire row (the default behavior).
  • Ctrl/Cmd + Space selects/unselects a row (equivalent to Ctrl + Click)
  • Shift + Space having a row selected and hitting Shift + Space on another row should make a range selection between the two rows starting from the upper and ending with the lower.
  • Shift + Up Arrow selects the upper row. TreeListSelectionMode.Single - only upper row is selected. TreeListSelectionMode.Multiple - selection is extended.
  • Shift + Down Arrow selects the upper row. TreeListSelectionMode.Single - only upper row is selected. TreeListSelectionMode.Multiple - selection is extended.
  • F2 in data cell with InCell EditMode - opens cell for edit.
  • Esc if editor is opened, cancels the edit and closes the editor. In Command cell if focus is on a button, returns the focus back to the cell.
  • Enter in data cell with InCell EditMode - opens cell for edit. In EditMode – saves changes and closes the editor. If the cell is expandable – expands the item. If the cell contains a template - focus is handled inside. In command cell - focus is moved to first command button inside the cell and Enter triggers it.

Checkbox Column

  • Enter focuses the checkbox inside the column.
  • Space If row selection is allowed only through checkboxes, toggles the row selection only if the checkbox is focused. If row selection is allowed through the entire row, toggles the row selection even if the cell is focused, not the checkbox.
  • Esc moves focus back to the table cell if the checkbox is focused.

Edited Row

  • Tab moves focus between the focusable elements in the row so you can use their keyboard shortcuts. With InCell edit mode, opens the next/previous cell for editing.

    To exit the InLine edit mode, go to the Update or Cancel button in the command column.
    To exit the PopUp edit mode, go to the Save or Cancel button in the popup itself.
    To exit the InCell edit mode, move focus away from the grid. Pressing Enter on the last row also ends edit mode, but on other rows it puts the next row in edit mode to allow fast data entry.

Pager

  • Left/Right Arrow moves focus to page buttons.
  • Up Arrow moves focus to first cell of last row in TreeList.
  • Enter selects the page

Header

  • Left/Right Arrow moves focus to adjacent headers.
  • Down Arrow moves focus to the cell below (either FilterRow cell or content cell).
  • Enter toggles next sort mode if sorting is enabled.

Filter Row

  • Arrow Keys td elements receive focus as standard navigation in TreeList.
  • Enter enters in the td. Meaning that all filter components gain tabindex=0.
  • Tab goes through the filter row components. If this is the last filter cell and the last filter component, the focus will go to the next focusable element on the page outside of the TreeList.
  • Esc focus returns to the td element

Filter Menu

  • Tab when a header cell is focused, pressing Tab will move to the filter header icon (Enter key is reserved for sorting. After that navigation will be focused as a standard DropDownList navigation, e.g. Alt + Down arrow will open the DropDownList.
  • Esc Closes the filter menu. Note that if a DropDownList inside the menu is currently opened, Escape will close the DropDownList instead of the filter menu (pressing Escape a second time will close the menu).

Multi-checkbox Filter

  • Tab moves focus between the search input, checkboxes and action buttons.
  • Space toggles a checkbox (the default behavior).
  • Enter if the focus is on an action button, triggers its action.
  • Esc closes the menu.

Popup Editor

  • Tab moves to the next editor in the form.
  • Esc closes the editor. The focus goes to the command cell from where the popup was opened.

Toolbar

  • Tab navigates to and out of the toolbar.

Description

To enable keyboard navigation in the TreeList, set its Navigable parameter to true.

Support & Learning Resources

An error has occurred. This application may no longer respond until reloaded.
Reload