Blazor Grid — Keyboard Support CTP (v23.1)

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">
    @* ... *@
</DxGrid>

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.

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">
    @* ... *@
</DxGrid>
<DxFormLayout>
    <DxFormLayoutItem Caption="@MemoCaption" Visible="@ShowMemo">
        <DxMemo Text=@Notes />
    </DxFormLayoutItem>
</DxFormLayout>
@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;
        }
        else
            ShowMemo = false;
    }
    // ...
}

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.

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.

Shortcuts

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

Limitations

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.

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