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):
| 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. |
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: