Keyboard Support in Blazor TreeList

• Nov 28, 2024
• 6 minutes to read

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.

Run Demo: TreeList - Overview

Navigation in the TreeList Component

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.

Navigation in Popups

The TreeList component ships with the following pop-up elements:

• Column Chooser
• Column Filter Menu
• Delete Confirmation Dialog
• Popup Edit Form

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.

Keyboard Shortcuts

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	Moves focus to the next navigation area.
Ctrl + Up Arrow	Option + Shift + Tab	Moves focus to the previous navigation area.
Tab Shift + Tab	Tab Shift + Tab	Moves focus between treelist cells. When leaving the last/first cell in the current area, the navigation moves to the next/previous area. Within an element or pager area, moves focus between nested focusable objects (such as editors, buttons). When leaving the last object, the navigation returns to the previous level. Within a popup, moves focus between nested focusable objects (such as editors, buttons). When leaving the last object, the navigation returns to the first nested object.
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	Within an element, exits nested object navigation. Within a popup, closes the popup and returns focus to the data area.

The following sections describe keyboard shortcuts available when a certain TreeList element is focused.

Header Row

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.

New Item Row

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:

Shortcut Keys	Description
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 (Mac)	Focuses the first cell of the current row.
End Fn + Right Arrow (Mac)	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.

Data Row

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.

Selection Column

The following shortcuts are available when focus is on the selection column:

Shortcut	Description
Enter	Selects/deselects the checkbox.

Command Column

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.

Pager

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.

Column Chooser

The following shortcuts are available when focus is within the column chooser:

Shortcut	Description
Enter Space	Selects/deselects the checkbox in the focused column.

Limitations

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”.