Readme

Author: vl-albedo

CS/GridCustomShortcuts/Components/Pages/Index.razor

@@ -76,6 +76,7 @@ else
             module = await JS.InvokeAsync<IJSObjectReference>("import",
                 "./Components/Pages/Index.razor.js");
             dotNetHelper = DotNetObjectReference.Create(this);
+            await module.InvokeVoidAsync("focusGrid");
             await module.InvokeVoidAsync("addCaptureKeyListener", gridWrapper, dotNetHelper);
         }
     }

CS/GridCustomShortcuts/Components/Pages/Index.razor.js

@@ -23,4 +23,8 @@ export function removeCaptureKeyListener() {
         window.removeEventListener('keydown', keydownHandler, true);
         keydownHandler = null;
     }
+}
+
+export function focusGrid() {
+    document.getElementsByClassName('dxbl-grid')[0].focus();
 }

README.md

@@ -3,31 +3,56 @@
 [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
 [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)
 <!-- default badges end -->
-# Product/Platform - Task
+# Blazor Grid - Custom Keyboard Shortcuts
 
-This is the repository template for creating new examples. Describe the solved task here.
+The DevExpress Blazor [Grid](https://docs.devexpress.com/Blazor/403143/components/grid) supports a number of keyboard shortcuts out-of-the-box. You can also define custom key combinations to further enhance interaction speed and streamline workflows according to business requirements or user preferences.
 
-Put a screenshot that illustrates the result here.
+This example binds custom keyboard shortcuts to the Grid component:
 
-Then, add implementation details (steps, code snippets, and other technical information in a free form), or add a link to an existing document with implementation details. 
+- <kbd>Ctrl</kbd> + <kbd>A</kbd>: select all rows
+- <kbd>Shift</kbd> + <kbd>Enter</kbd>: open row details
+
+> **Note**:
+> For keyboard shortcuts to operate, the Grid component must be focused. To bring the grid into focus, click anywhere within its area.
+
+## Implementation Details
+
+Add [DxGrid](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid) and [DxPopup](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPopup) components to the [page](CS/GridCustomShortcuts/Components/Pages/Index.razor). The popup will display the selected cell's details when a user presses <kbd>Shift</kbd> + <kbd>Enter</kbd>.
+
+Create a [JavaScript file](CS/GridCustomShortcuts/Components/Pages/Index.razor.js) in the project. This file implements 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](CS/GridCustomShortcuts/Components/Pages/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 technical details, read [Call .NET methods from JavaScript functions in ASP.NET Core Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-dotnet-from-javascript) article.
+
+### Release Resources
+
+In the `@code` section of the [Index.razor](CS/GridCustomShortcuts/Components/Pages/Index.razor) page, implement a `DisposeAsync` method. It removes the keyboard event listener, cleans up JavaScript resources, and frees allocated memory.
+
+For technical details, read [Implement a DisposeAsync method](https://learn.microsoft.com/en-us/dotnet/standard/garbage-collection/implementing-disposeasync) article.
 
 ## Files to Review
 
-- link.cs (VB: link.vb)
-- link.js
-- ...
+- [Index.razor](CS/GridCustomShortcuts/Components/Pages/Index.razor)
+- [Index.razor.js](CS/GridCustomShortcuts/Components/Pages/Index.razor.js)
 
 ## Documentation
 
-- link
-- link
-- ...
-
-## More Examples
+- [Keyboard Support in Blazor Grid](https://docs.devexpress.com/Blazor/404652/components/grid/keyboard-support)
+- [DxGrid Class](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid)
+- [DxPopup Class](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPopup)
 
-- link
-- link
-- ...
 <!-- feedback -->
 ## Does this example address your development requirements/objectives?