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

TreeList - Keyboard Navigation

1 - 10 of 99 items
  • 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.

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

  • Right arrow and Left arrow moves the focus between the toolbar focusable elements.
  • Home focuses to the first focusable element.
  • End focuses to the last focusable element.

Pager

If the focus is in the data table and paging is enabled, pressing Tab key will move the focus to the Pager. You can refer to Pager - Keyboard Navigation for its supported shortcuts.

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.

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 moves to the next editor in the form.
  • Enter enters in the td and focuses the first focusable element in it. All filter row components gain tabindex=0. Focus remains trapped inside the filter row.
  • Tab goes through the filter row components.
  • Esc focus goes to the td element wrapping the currently focused filter component.

Filter Menu

  • Alt + Arrow Down when a header cell is focused, opens the filter menu.
  • Tab and Shift + Tab cycles the filter menu fields.
  • 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).
  • Space toggles a checkboxmenuitem (if focused).

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.

Description

Keyboard navigation provides all web and app users with a fast keyboard-only navigation capability and is also part of the web accessibility features - it enables users with disabilities to fully control their website or app access through the keyboard.

By default, users can only navigate to links, buttons, and form controls with a keyboard. The navigation order in which interactive items receive keyboard focus has to be logical and intuitive. Generally, keyboard navigation logic needs to follow the visual horizontal and vertical flow of the page, for example, left to right and top to bottom, header first followed by the main and then the page navigation.

To enable the keyboard navigation of the Telerik UI for Blazor TreeList set Navigable="true", as demonstrated in this demo.

This TreeList Keyboard Navigation example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

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