blazor-405207-components-treelist-keyboard-support.md
The DevExpress Blazor TreeList allows users to access UI elements with their keyboard. Keyboard navigation is implemented on the client and works seamlessly even in Blazor Server apps with a slow connection. Built-in keyboard shortcuts allow users to perform various operations with TreeList elements.
Note
Keyboard support allows users to interact with application content in cases they cannot use a mouse or they rely on assistive technologies (like screen readers or switch devices). Refer to the Accessibility help topic for information on other accessibility areas that we address.
The image below shows navigation areas available in the TreeList component:
Users can press Ctrl+Up Arrow or Ctrl+Down Arrow keys to navigate between these areas. To navigate between elements within an area, press Arrow keys or Tab and Shift+Tab shortcuts. Use Ctrl+Right Arrow and Ctrl+Left Arrow shortcuts to expand and collapse rows.
Some areas or their elements contain nested focusable objects. For instance, a pager includes buttons. Press Enter to switch to navigation between nested objects and Esc to return to the previous navigation level, and Tab and Shift+Tab shortcuts to move focus between nested objects. Users return to the previous level when navigating from the last object.
The TreeList component ships with the following pop-up elements:
Column ChooserCall any of the ShowColumnChooser method overloads to display the column chooser.Column Filter MenuUse the FilterMenuButtonDisplayMode property to display filter menu buttons in column headers. Once displayed, users can focus a header and press Alt+Arrow Down (Option+Arrow Down on Mac) to open the column filter menu. Esc closes the filter menu and returns focus to the column header.Delete Confirmation DialogUsers can focus the Delete button and press Enter to open the delete confirmation dialog. To display this dialog from code, call the ShowRowDeleteConfirmation method.Filter Builder DialogUsers can focus the current filter region in the filter panel and press Enter to open the filter builder dialog. Call the ShowFilterBuilder method to display this dialog from code.Popup Edit FormIn Popup Edit Form mode, users can focus the New or Edit button and press Enter to open the edit form in a popup. To display this popup from code, call the StartEditNewRowAsync or StartEditRowAsync method.
Once a user opens a popup, the TreeList focuses the first nested object in this popup. Use Tab and Shift+Tab shortcuts to navigate between nested objects. Note that navigation in pop-up elements moves in cycles: users can navigate from the last to the first nested object, and vice versa. The Esc key closes the popup and returns focus to the data area.
The table below lists common keyboard shortcuts:
|
PC/Windows Shortcuts
|
Mac Shortcuts
|
Description
| | --- | --- | --- | |
Arrow keys
|
Arrow keys
|
Move focus between elements within the column chooser or toolbar, header, body, and footer navigation areas.
| |
Ctrl + Down Arrow
|
Option + Tab
Ctrl + Command + Arrow Down
|
Moves focus to the next navigation area. If the last navigation area is already focused, the next focusable object on the page is focused.
| |
Ctrl + Up Arrow
|
Option + Shift + Tab
Ctrl + Command + Arrow Up
|
Moves focus to the previous navigation area. If the first navigation area is already focused, the previous focusable object on the page is focused.
| |
Tab
Shift + Tab
|
Tab
Shift + Tab
|
| |
Enter
|
Enter
|
If the focused element contains focusable objects (for instance, a command column cell contains New , Edit , and Delete buttons), switches to navigation between nested objects.
| |
Escape
|
Escape
|
| |
Ctrl + F
|
Ctrl + F
|
Focuses the search box (provided that the element is visible).
| |
Shift + F10
|
Shift + F10
|
Opens the context menu.
|
Built-in toolbar and editor components include their own navigation shortcuts. Refer to the following help topic for additional information on keyboard support in various DevExpress Blazor components: Accessibility - Keyboard Support.
The following sections describe keyboard shortcuts available when a certain TreeList element is focused.
The following shortcuts are available when focus is on the header row:
|
PC/Windows Shortcuts
|
Mac Shortcuts
|
Description
| | --- | --- | --- | |
Space
|
Space
|
Clears sort order applied to other columns, and initiates sort operations or changes sort order for the focused column.
| |
Shift + Space
|
Shift + Space
|
Maintains sort order applied to other columns, and initiates sort operations or changes sort order for the focused column.
| |
Ctrl + Space
|
Option + Space
|
Clears sort order for the focused column.
| |
Home
|
Fn + Left Arrow
|
Focuses the first cell of the current row.
| |
End
|
Fn + Right Arrow
|
Focuses the last cell of the current row.
| |
Alt + Down Arrow
|
Option + Down Arrow
|
Opens the column filter menu (provided that the filter menu button is visible). The filter menu displays unique column values that match the current filter criteria.
| |
Shift + Alt + Down Arrow
|
Shift + Option + Down Arrow
|
Opens the column filter menu (provided that the filter menu button is visible). The filter menu displays all unique column values.
|
Set the EditNewRootRowPosition property to FixedOnTop or LastRow to display the new item row at the top of the current page or bottom of the last page. The following shortcuts are available when the new item row is focused:
|
PC/Windows Shortcuts
|
Mac Shortcuts
|
Description
| | --- | --- | --- | |
Enter
|
Enter
|
Starts editing a new root data row and invokes a pop-up edit form or displays an inline edit form, edit row, or cell editors.
| |
Home
|
Fn + Left Arrow
|
Focuses the first cell of the current row.
| |
End
|
Fn + Right Arrow
|
Focuses the last cell of the current row.
|
Users can press Tab or Shift+Tab keys to navigate between the new item row’s data cells. If focus goes beyond the last/first data cell in EditCell mode, the TreeList focuses the cell on the opposite end and validates user input.
The following shortcuts are available when focus is on a data row:
|
PC/Windows Shortcuts
|
Mac Shortcuts
|
Description
| | --- | --- | --- | |
Ctrl + Right Arrow
Ctrl + Left Arrow
|
Command + Right Arrow
Command + Left Arrow
|
Expands/collapses the focused row.
| |
Space
|
Space
|
Clears selection and then selects the focused row (provided that the AllowSelectRowByClick property is set to true).
| |
Ctrl + Space
|
Ctrl + Space
|
Maintains selection and selects/deselects the focused row (provided that the AllowSelectRowByClick property is set to true).
| |
Home
|
Fn + Left Arrow
|
Focuses the first cell of the current row.
| |
End
|
Fn + Right Arrow
|
Focuses the last cell of the current row.
| |
Ctrl + Home
|
Ctrl + Fn + Left Arrow
|
Focuses the first data cell on the current page.
| |
Ctrl + End
|
Ctrl + Fn + Right Arrow
|
Focuses the last data cell on the current page.
| |
Page Up
|
Fn + Up Arrow
|
Moves focus one page up. If the first data row on the current page is already focused, focuses the last data row on the previous page.
| |
Page Down
|
Fn + Down Arrow
|
Moves focus one page down. If the last row on the current page is already focused, focuses the first row on the next page.
|
In EditCell and EditRow modes, an edited row displays one or more in-place editors. A focused cell editor handles keyboard shortcuts before the TreeList component. As a result, certain shortcuts execute editor-specific actions, for instance, Left Arrow and Right Arrow move the cursor within the editor’s input element.
The following tables describe TreeList shortcuts available when a cell editor is focused. The first table lists shortcuts that perform the same actions in both edit modes. The second table describes shortcuts whose behavior depends on the edit mode:
|
PC/Window Shortcuts
|
Mac Shortcuts
|
Description
| | --- | --- | --- | |
Ctrl + Arrow Down
|
Option + Tab
|
Moves focus to the next navigation area. If the last navigation area is already focused, the next focusable object on the page is focused.
| |
Ctrl + Arrow Up
|
Option + Shift + Tab
|
Moves focus to the previous navigation area. If the first navigation area is already focused, the previous focusable object on the page is focused.
| |
Ctrl + Home
|
Ctrl + Fn + Left Arrow
|
Focuses the first data cell on the current page.
| |
Ctrl + End
|
Ctrl + Fn + Right Arrow
|
Focuses the last data cell on the current page.
|
|
Shortcut
|
In EditRow Mode
|
In EditCell Mode
| | --- | --- | --- | |
Enter
|
Validates pending user input and saves changes.
|
Hides the cell editor and validates the cell value.
| |
Esc
|
Discards all changes made in the row and cancels row editing.
|
Hides the editor and discards changes made in this cell. If the editor is hidden, the TreeList discards all changes made in the row and cancels row editing.
| |
Tab
Shift + Tab
|
Moves focus between focusable content in TreeList cells (editors, buttons, cells in display mode).
|
Hides the editor in the current cell, focuses the next or previous data cell, and displays an editor in the newly focused cell.
When leaving the last/first cell in the current row, the TreeList validates pending user input and saves changes.
|
The following shortcuts are available when focus is on the selection column:
|
Shortcut
|
Description
| | --- | --- | |
Enter
Space
|
Selects/deselects the checkbox.
|
The following shortcuts are available when the command column is focussed:
|
Shortcut
|
Description
| | --- | --- | |
Enter
|
If the focused cell contains a single button, presses the button.
|
The following shortcuts are available when focus is on the pager area but not within it:
|
PC/Windows Shortcuts
|
Mac Shortcuts
|
Description
| | --- | --- | --- | |
Left Arrow
Right Arrow
|
Left Arrow
Right Arrow
|
Navigates to the previous/next page.
| |
Home
|
Fn + Left Arrow
|
Navigates to the first page.
| |
End
|
Fn + Right Arrow
|
Navigates to the last page.
|
|
Shortcut Keys
|
Description
| | --- | --- | |
Space
|
|
The following shortcuts are available when focus is within the column chooser:
|
Shortcut
|
Description
| | --- | --- | |
Enter
Space
|
Selects/deselects the checkbox in the focused column.
|
If you use Safari on macOS, enable keyboard support to ensure all the functionality is available. Go to Apple menu → Settings → Keyboard → Shortcuts and select “Use keyboard navigation to move focus between controls”.