Keyboard Support in Blazor Grid

• Dec 08, 2023
• 5 minutes to read

Important

The keyboard navigation feature is currently available as a community technology preview (CTP).

Use the KeyboardNavigationEnabled property to allow keyboard access to every UI element in the DevExpress Blazor Grid. The keyboard navigation feature combines basic navigation rules with shortcuts for specific elements. Keyboard navigation is implemented on the client and works seamlessly even in Blazor Server apps with a slow connection.

<DxGrid Data="@Data" KeyboardNavigationEnabled="true">
    @*...*@
</DxGrid>

Run Demo: Grid - Overview

Navigation in the Grid Component

The Grid component includes the following root navigation areas: toolbar, group panel, data area, and pager. Use the Tab and Shift+Tab keys to navigate between these areas. To navigate between elements within an area, use the Arrow keys.

If an element contains nested focusable objects (for instance, a pager contains buttons) press Enter to switch to navigation between nested objects and Esc to return to the previous navigation level. Use Tab and Shift+Tab shortcuts to move focus between nested objects. When leaving the last object, navigation returns to the previous level.

Navigation in Popups

The Grid 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 Grid 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:

Shortcut Keys	Description
Arrow keys	Move focus between elements within a toolbar, group panel, data area, or column chooser.
Tab Shift + Tab	Moves focus between root navigation areas: toolbar, group panel, data area, and pager. Moves focus between elements within a pager or column chooser. Within an element, 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	If the focused element contains focusable objects (for instance, a template that contains detail grid), switches to navigation between nested objects.
Escape	Within an element, exits nested object navigation. Within a popup, closes the popup and returns focus to the data area.
Ctrl + F	Focuses the search box (provided that the element is visible).

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

Group Panel

Shortcut Keys	Description
Space	Changes sort order for the focused column.
Alt + Arrow Down Option + Arrow Down (Mac)	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 + Arrow Down Shift + Option + Arrow Down (Mac)	Opens the column filter menu (provided that the filter menu button is visible). The filter menu displays all unique column values.

Header Row

Shortcut Keys	Description
Space	Clears sort order applied to other columns, and initiates sort operations or changes sort order for the focused column.
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 (Mac)	Clears sort order for the focused column.
Alt + Arrow Down Option + Arrow Down (Mac)	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 + Arrow Down Shift + Option + Arrow Down (Mac)	Opens the column filter menu (provided that the filter menu button is visible). The filter menu displays all unique column values.

Data Row

Shortcut Keys	Description
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.
Ctrl + Home Ctrl + Fn + Left Arrow (Mac)	Focuses the first data cell on the current page.
Ctrl + End Ctrl + Fn + Right Arrow (Mac)	Focuses the last data cell on the current page.
Page Up Fn + Arrow Up (Mac)	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 + Arrow Down (Mac)	Moves focus one page down. If the last row on the current page is already focused, focuses the first row on the next page.

Group Row

Shortcut Keys	Description
Left Arrow Right Arrow	Collapses/expands the focused group row.

Selection Column

Shortcut Keys	Description
Enter	Selects/deselects the checkbox.

Command Column

Shortcut Keys	Description
Enter	If the focused cell contains a single button, presses the button.

Pager

The following shortcuts are available when the focus is on the pager area but not within it:

Shortcut Keys	Description
Left Arrow Right Arrow	Navigates to the previous/next page.
Home Fn + Left Arrow (Mac)	Navigates to the first page.
End Fn + Right Arrow (Mac)	Navigates to the last page.

Column Chooser

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

Limitations

The keyboard navigation feature does not currently support Virtual scrolling mode.

In Safari browser on macOS, make sure that keyboard support is enabled; otherwise some functionality may not be available. Go to Apple menu → Settings → Keyboard → Shortcuts and select “Use keyboard navigation to move focus between controls”.