Blazor Grid - Custom Keyboard Shortcuts

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

This example modifies keyboard shortcuts in our Blazor Grid component as follows:

• Ctrl + A: selects all rows
• Shift + Enter: opens row details
• Escape: does nothing (unlike default implementation that cancels editing)

Note: DevExpress Blazor Grid keyboard shortcuts work when the component has input focus. 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 row 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 - Focuses the grid programmatically on page load (activates grid-specific shortcuts).

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: Call .NET methods from JavaScript functions in ASP.NET Core Blazor.

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: Implement a DisposeAsync method.

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)