Keyboard Support in Blazor Grid
- 6 minutes to read
The DevExpress Blazor Grid allows users to access every UI element with a 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 grid elements.
Navigation in the Grid Component
The image below shows navigation areas available in the Grid component:
To navigate between these areas, users can press Ctrl+Up/Ctrl+Down keys (Alt+Tab/Alt+Shift+Tab keys on Mac). Press arrow keys or Tab/Shift+Tab shortcuts to navigate between elements within an area.
Some areas or their elements contain 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:
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 the column chooser or toolbar, group panel, header, body, and footer navigation areas. |
Ctrl + Arrow Down | Moves focus to the next navigation area. |
Ctrl + Arrow Up | Moves focus to the previous navigation area. |
Tab |
|
Enter | If the focused element contains focusable objects (for instance, a template that contains a detail grid), switches to navigation between nested objects. |
Escape |
|
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 | 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 | 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 | Clears sort order for the focused column. |
Alt + Arrow Down | 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 | 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 EditNewRowPosition 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 data row and invokes a pop-up edit form or displays an inline edit form, edit row, or cell editors. |
Home | Focuses the first cell of the current row. |
End | 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 Grid focuses the cell on the opposite end and validates user input.
Data Row
Shortcut Keys | Description |
|---|---|
Space | Selects/deselects the focused row (provided that the AllowSelectRowByClick property is set to |
Home | Focuses the first cell of the current row. |
End | Focuses the last cell of the current row. |
Ctrl + Home | Focuses the first data cell on the current page. |
Ctrl + End | Focuses the last data cell on the current page. |
Page Up | 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 | 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 | 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 | Navigates to the previous/next page. |
Home | Navigates to the first page. |
End | Navigates to the last page. |
Column Chooser
Shortcut Keys | Description |
|---|---|
Enter | Selects/deselects the checkbox in the focused column. |
Limitations
In the 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”.