Skip to content

Commit c1ef15b

Browse files
authored
Merge pull request #5 from DevExpress-Examples/doc_review
Ray's improvements
2 parents 5c16b6a + 96ed73d commit c1ef15b

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
@@ -6,23 +6,23 @@
66
<!-- default badges end -->
77
# Blazor Grid - Custom Keyboard Shortcuts
88

9-
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.
9+
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.
1010

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

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

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

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

23-
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>.
23+
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>.
2424

25-
Create a [JavaScript file](CS/GridCustomShortcuts/Components/Pages/Index.razor.js) in the project. This file implements the following functions for managing keyboard shortcuts:
25+
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:
2626

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

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

4242
### Release Resources
4343

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

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

4848
## Files to Review
4949

0 commit comments

Comments
 (0)