Skip to content

Commit 96ed73d

Browse files
committed
Ray's improvements
1 parent 10baad7 commit 96ed73d

File tree

1 file changed

+9
-9
lines changed

1 file changed

+9
-9
lines changed

README.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,23 @@
55
<!-- default badges end -->
66
# Blazor Grid - Custom Keyboard Shortcuts
77

8-
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.
8+
The DevExpress Blazor [Grid](https://docs.devexpress.com/Blazor/403143/components/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.
99

10-
This example binds custom keyboard shortcuts to the Grid component:
10+
This example binds the following custom keyboard shortcuts to our Blazor Grid component:
1111

12-
- <kbd>Ctrl</kbd> + <kbd>A</kbd>: select all rows
13-
- <kbd>Shift</kbd> + <kbd>Enter</kbd>: open row details
12+
- <kbd>Ctrl</kbd> + <kbd>A</kbd>: selects all rows
13+
- <kbd>Shift</kbd> + <kbd>Enter</kbd>: opens row details
1414

1515
![Blazor Grid Custom Keyboard Shortcuts](images/grid-keyboard-shortcuts.gif)
1616

1717
> [!NOTE]
18-
> For keyboard shortcuts to operate, the Grid component must be focused. To bring the grid into focus, click anywhere within its area.
18+
> For keyboard shortcuts to work properly, the DevExpress Blazor Grid component must be focused. To bring the grid into focus, click within the component.
1919
2020
## Implementation Details
2121

22-
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>.
22+
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 selected cell details when a user presses <kbd>Shift</kbd> + <kbd>Enter</kbd>.
2323

24-
Create a [JavaScript file](CS/GridCustomShortcuts/Components/Pages/Index.razor.js) in the project. This file implements the following functions for managing keyboard shortcuts:
24+
Create a [JavaScript file](CS/GridCustomShortcuts/Components/Pages/Index.razor.js) in the project. This file must implement the following functions for managing keyboard shortcuts:
2525

2626
- `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.
2727
- `removeCaptureKeyListener` - Removes the previously attached keyboard event listener.
@@ -36,13 +36,13 @@ In the `@code` section of the [Index.razor](CS/GridCustomShortcuts/Components/Pa
3636
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.)
3737
4. Implement `SelectAllRows` and `HandleKeyDown` JSInvokable methods to handle operations triggered by keyboard shortcuts.
3838

39-
For technical details, read [this article](https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-dotnet-from-javascript).
39+
For additional information, please review the following [article](https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-dotnet-from-javascript).
4040

4141
### Release Resources
4242

4343
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.
4444

45-
For technical details, read [this article](https://learn.microsoft.com/en-us/dotnet/standard/garbage-collection/implementing-disposeasync).
45+
For additional technical information, please review the following [article](https://learn.microsoft.com/en-us/dotnet/standard/garbage-collection/implementing-disposeasync).
4646

4747
## Files to Review
4848

0 commit comments

Comments
 (0)