Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Keyboard Support in Blazor Grid

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

Run Demo: Grid - Overview

The image below shows navigation areas available in the Grid component:

Blazor Grid Keyboard Navigation Areas

To navigate between these areas, users can press Ctrl+Up/Ctrl+Down keys (Option+Tab/Option+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.

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:

PC/Windows Shortcuts

Mac Shortcuts

Description

Arrow keys

Arrow keys

Move focus between elements within the column chooser or toolbar, group panel, header, body, and footer navigation areas.

Ctrl + Arrow Down

Option + Tab

Moves focus to the next navigation area.

Ctrl + Arrow Up

Option + Shift + Tab

Moves focus to the previous navigation area.

Tab
Shift + Tab

Tab
Shift + Tab

  • Moves focus between grid 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 template that contains a detail grid), 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.

Ctrl + F

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

PC/Windows Shortcuts

Mac Shortcuts

Description

Space

Space

Changes sort order for the focused column.

Alt + Arrow Down

Option + 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

Shift + Option + 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

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.

Alt + Arrow Down

Option + 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

Shift + Option + 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:

PC/Windows Shortcuts

Mac Shortcuts

Description

Enter

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

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 Grid focuses the cell on the opposite end and validates user input.

#Data Row

PC/Windows Shortcuts

Mac Shortcuts

Description

Space

Space

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 + Arrow 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

Fn + Arrow 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.

#Cell Editor

In EditCell and EditRow modes, an edited row displays one or more in-place editors. A focused cell editor handles keyboard shortcuts before the Grid 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 Grid 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.

Ctrl + Arrow Up

Option + Shift + Tab

Moves focus to the previous navigation area.

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

  • In v24.2.4 and earlier, validates the cell value and moves focus from the editor to the cell.
  • Starting with v24.2.5, validates pending user input and saves changes.

Hides the cell editor and validates the cell value.

Esc

  • In v24.2.4 and earlier, discards changes made in this editor and moves focus from the editor to the cell.
  • Starting with v24.2.5, 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 Grid discards all changes made in the row and cancels row editing.

Tab
Shift + Tab

Moves focus between focusable content in Grid 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 Grid validates pending user input and saves changes.

#Group Row

Shortcut Keys

Description

Left Arrow
Right Arrow

Collapses/expands the focused group row.

#Selection Column

Shortcut Keys

Description

Enter
Space

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:

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

Shortcut Keys

Description

Enter
Space

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