Blazor Grid — Keyboard Support CTP (v23.1)

ASP.NET Team Blog
20 July 2023

In this blog post, I'll describe keyboard-related enhancements we incorporated into the DevExpress Blazor Grid in our last major release. The features outlined below are available as a Community Tech Preview.

As its name implies, "keyboard navigation" allows users to access Grid UI elements and navigate between these elements using a keyboard. To enable this feature, set the KeyboardNavigationEnabled property to true.

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

Unlike competitors, our Blazor Grid component processes keyboard navigation on the client side. The Grid sends a request to the server only when the user performs a specific operation (such as sorting, grouping, or paging). As such, keyboard navigation works as expected even in Blazor Server apps with a slow connection.

Client-Side Keyboard Navigation

Because of our client-side implementation, the server is unaware of element focus state. Should you need to manage focus state, you can enable the Grid's focused row. The focused row will follow client focus and do so asynchronously (to avoid possible delays).

The following example displays additional information about the currently focused item:

<DxGrid Data="Data" KeyboardNavigationEnabled="true"
    FocusedRowEnabled="true" FocusedRowChanged="Grid_FocusedRowChanged">
    @* ... *@
    <DxFormLayoutItem Caption="@MemoCaption" Visible="@ShowMemo">
        <DxMemo Text=@Notes />
@code {
    IEnumerable<object> Data { get; set; }
    string MemoCaption { get; set; }
    string Notes { get; set; }
    bool ShowMemo { get; set; }
    void Grid_FocusedRowChanged(GridFocusedRowChangedEventArgs e) {
        if (e.DataItem != null) {
            ShowMemo = true;
            var employee = (Employee)e.DataItem;
            MemoCaption = employee.FirstName + " " + employee.LastName + " details:";
            Notes = employee.Notes;
            ShowMemo = false;
    // ...
Keyboard Navigation and Focused Row

Navigation Rules

Our Blazor Grid includes three root navigation areas: group panel, data table, and pager. These areas are highlighted in separate colors in the image below.

Root Navigation Areas

To navigate to the next/previous area, use Tab/Shift+Tab. Arrow keys navigate between elements in a given area (for example, between data cells).

If an element contains nested objects, users can press Enter to focus the first object, then press Tab/Shift+Tab to navigate between objects. When leaving the last nested object, navigation automatically returns to the previous level. To move back one level, users can also press Esc. In the following image, we navigate between buttons in the pager via the Tab key.

Navigate through Pager Buttons


The DevExpress Blazor Grid supports the following shortcuts (to help users interact with various Grid elements):

Shortcut Focused Element Description
Enter Command Column If the focused cell contains a single button, presses the button.
Enter Selection Column Selects/deselects the checkbox.
Space Group Panel Initiates sort operations or changes sort order for the focused column.
Space Data Row Selects/deselects the focused row if the corresponding feature is enabled.
Space Header Row Clears sort order applied to other columns, and initiates sort operations or changes sort order for the focused column.
Shift+Space Header Row Maintains sort order applied to other columns, and initiates sort operations or changes sort order for the focused column.
Ctrl+Space Header Row Clears sort order for the focused column.
Ctrl+F Any Focuses the search box.


At present, keyboard navigation is available as a Community Tech Preview (CTP). The following limitations apply:

  • Keyboard navigation does not work with our Grid's virtual vertical scrolling mode.
  • Users cannot focus dialogs and windows, including column filter menu and column chooser.

In our next release cycle, we have plans to address these limitations.

If keyboard navigation is important to you, you can test our current implementation online: DevExpress Blazor Grid Demos. Nearly all demos include a "Keyboard Navigation (Tech Preview)" switch. Use this switch to enable keyboard navigation.

Enable Switch

Alternatively, you can download v23.1 and explore the capabilities of the DevExpress Blazor Grid on your machine:
DevExpress Blazor v23.1 – Licensed | DevExpress Blazor v23.1 – Trial

Your Feedback Matters

As always, we welcome your feedback. Please take a moment to answer the following survey questions:

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.