DxGrid.KeyboardNavigationEnabled Property

Specifies whether keyboard navigation and shortcuts are available in the Grid component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(false)]
[Parameter]
public bool KeyboardNavigationEnabled { get; set; }

Property Value

Type	Default	Description
Boolean	false	true if keyboard navigation is enabled; otherwise, false.

Remarks

Important

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

Set the KeyboardNavigationEnabled property to true to activate keyboard shortcuts that focus grid elements, select rows, expand/collapse group rows, navigate between pages, and execute other actions. Keyboard navigation is implemented on the client and works seamlessly in Blazor Server apps with a slow connection.

Run Demo: Grid - Overview

The keyboard navigation feature combines basic navigation rules and shortcuts for specific elements.

The grid includes the following root navigation areas: group panel, data table, and pager. Use the Tab and Shift+Tab keys to navigate between these areas.

To navigate between elements within an area, use 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.

The Grid implements custom shortcuts for the following elements:

Group Panel

• Space – Initiates sort operations or changes sort order for the focused column.

Header Row

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

Data Row

• Space – Selects / deselects the focused row (provided that the AllowSelectRowByClick property is set to true).

Group Row

• Left Arrow/Right Arrow – Collapses/Expands the focused group row.

Comprehensive Keyboard Shortcut Reference

Shortcut Keys	Description
Arrow keys	Move focus between elements within a root navigation area (group panel, data table, or pager).
Left Arrow Right Arrow	Collapses/Expands the focused group row.
Tab Shift+Tab	Moves focus between root navigation areas: group panel, data table, and pager. 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.
Enter	If the focused element contains focusable objects (for instance, a template that contains detail grid), switches to navigation between nested objects. In the command column, if the focused cell contains a single button, presses the button. In the selection column, selects/deselects the checkbox.
Escape	Exits nested object navigation.
Space	In the group panel, initiates sort operations or changes sort order for the focused column. In the header row, clears sort order applied to other columns, and initiates sort operations or changes sort order for the focused column. In a data row, selects/deselects the focused row (provided that the AllowSelectRowByClick property is set to true).
Shift+Space	Maintains sort order applied to other columns, and initiates sort operations or changes sort order for the focused column.
Ctrl+Space	In the header row, clears sort order for the focused column.
Ctrl+F	Focuses the search box (provided that the element is visible).

Limitations

The following features and UI elements currently don’t support keyboard navigation:

• Virtual scrolling
• Column filter menu
• Column chooser

In Safari browser on macOS, you need to 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”.

Implements

KeyboardNavigationEnabled