Blazor Grid - Custom Keyboard Shortcuts

The DevExpress Blazor Grid supports a series of built-in keyboard shortcuts. You can also define custom key combinations to further enhance input speed and/or streamline workflows based upon business requirements or user preferences.

This example binds the following custom keyboard shortcuts to our Blazor Grid component:

• Ctrl + A: selects all rows
• Shift + Enter: opens row details

Note: For keyboard shortcuts to work properly, the DevExpress Blazor Grid component must be focused. To bring the grid into focus, click within the component.

Implementation Details

Add DxGrid and DxPopup components to the page. The popup will display selected cell details when a user presses Shift + Enter.

Create a JavaScript file in the project. This file must implement the following functions for managing keyboard shortcuts:

• addCaptureKeyListener - Attaches a keyboard event listener to the grid and defines custom shortcuts. To prevent default web browser actions for the same key combinations, call event.stopPropagation(); within the event handler.
• removeCaptureKeyListener - Removes the previously attached keyboard event listener.
• focusGrid - Focus the grid programmatically on page load. This ensures shortcuts are instantly available.

Bind JavaScript with .NET Code

In the @code section of the Index.razor page:

1. Register the JavaScript code in OnAfterRenderAsync lifecycle method.
2. Call the focusGrid JavaScript function.
3. Call the addCaptureKeyListener JavaScript function. Pass the DotNetObjectReference (for interoperability from JavaScript to .NET) and a reference to the <div> element that surrounds the grid (for capturing keyboard events.)
4. Implement SelectAllRows and HandleKeyDown JSInvokable methods to handle operations triggered by keyboard shortcuts.

For additional information, please review the following article.

Release Resources

In the @code section of the Index.razor page, implement a DisposeAsync method. It removes the keyboard event listener, cleans up JavaScript resources, and frees allocated memory.

For additional technical information, please review the following article.

Files to Review

• Index.razor
• Index.razor.js

Documentation

• Keyboard Support in Blazor Grid
• DxGrid Class
• DxPopup Class

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)