Skip to content

Commit 603311b

Browse files
committed
docs(grid): Improve selection documentation
1 parent 5492018 commit 603311b

File tree

3 files changed

+12
-19
lines changed

3 files changed

+12
-19
lines changed

components/grid/selection/cells.md

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,8 @@ To enable cell selection:
9191

9292
You can respond to user selection actions through the `SelectedCellsChanged` event. The event handler receives a collection of type `IEnumerable<GridSelectedCellDescriptor>`. The collection may have multiple, single, or no objects in it, depending on the `SelectionMode` and the last user selection.
9393

94+
> The `SelectedCellsChanged` event handler cannot be awaited. To execute asynchronous operations when the user selects rows, use the [`OnRowClick`]({%slug grid-events%}#onrowclick) or [`OnRowDoubleClick`]({%slug grid-events%}#onrowdoubleclick) event instead.
95+
9496
>caption Using the Grid SelectedCellsChanged event
9597
9698
````CSHTML
@@ -170,10 +172,6 @@ You can respond to user selection actions through the `SelectedCellsChanged` eve
170172
}
171173
````
172174

173-
### SelectedCellsChanged and Asynchronous Operations
174-
175-
The `SelectedCellsChanged` event handler cannot be awaited. To execute asynchronous operations when the user selects rows, use the [`OnRowClick`]({%slug grid-events%}#onrowclick) or [`OnRowDoubleClick`]({%slug grid-events%}#onrowdoubleclick) event instead.
176-
177175
## GridSelectedCellDescriptor
178176

179177
The `GridSelectedCellDescriptor` type exposes the following properties:

components/grid/selection/overview.md

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,7 @@ The Grid component supports row and cell selection. When you select a row or a c
2020

2121
## Enable Row or Cell Selection
2222

23-
You can configure the Grid either for row or cell selection:
24-
25-
* To enable row selection:
26-
* Set the [Grid `SelectionMode` parameter](#use-single-or-multiple-selection) or
27-
* Add a `<GridSelectionSettings>` tag to the `<GridSettings>` tag, and set the `SelectionType` parameter to `GridSelectionType.Row`.
28-
* Optionally, you can also select rows through the [checkbox column]({%slug components/grid/columns/checkbox%}).
29-
* To enable cell selection:
30-
* Add a `<GridSelectionSettings>` tag to the `<GridSettings>` tag, and set the `SelectionType` parameter to `GridSelectionType.Cell`.
31-
32-
See [Rows Selection Basics]({%slug grid-selection-row%}#basics) and [Cells Selection Basics]({%slug grid-selection-cell%}#basics) for more details.
23+
You can configure the Grid either for row or cell selection. See [Rows Selection Basics]({%slug grid-selection-row%}#basics) and [Cells Selection Basics]({%slug grid-selection-cell%}#basics) for more details and examples.
3324

3425
## Use Single or Multiple Selection
3526

components/grid/selection/rows.md

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,13 @@ To select a range of rows, hold the **Shift** key, while clicking on the first a
2020

2121
Check the [Grid Keyboard navigation demo](https://demos.telerik.com/blazor-ui/grid/keyboard-navigation) for detailed information about selecting rows with the keyboard.
2222

23-
You can also render a checkbox column that allows users to select and deselect rows. To use checkbox selection, add a [`GridCheckboxColumn`]({%slug components/grid/columns/checkbox%}) in the `GridColumns` collection of the Grid. The `GridCheckboxColumn` provides [additional configuration settings related to selection]({%slug components/grid/columns/checkbox%}#parameters).
23+
To enable row selection:
24+
25+
1. Define the selection mode through one of the following options:
26+
* Set the [Grid `SelectionMode` parameter]({%slug grid-selection-overview%}#use-single-or-multiple-selection), or
27+
* Add a `<GridSelectionSettings>` tag inside the Grid `<GridSettings>` tag, and set the `SelectionType` parameter to `GridSelectionType.Row`.
28+
1. Set the Grid `SelectedItems` parameter to a collection of type `IEnumerable<TItem>` where `TItem` is the Grid model class. The collection must be initialized in advance.
29+
1. Optionally, add a [checkbox column]({%slug components/grid/columns/checkbox%}) to the `GridColumns` collection of the Grid. The `GridCheckboxColumn` provides [additional configuration settings related to selection]({%slug components/grid/columns/checkbox%}#parameters).
2430

2531
>caption Grid multiple row selection
2632
@@ -78,6 +84,8 @@ You can also render a checkbox column that allows users to select and deselect r
7884

7985
You can respond to user selection actions through the `SelectedItemsChanged` event. The event handler receives a collection of the Grid data model. The collection may have multiple, single, or no items in it, depending on the `SelectionMode` and the last user selection.
8086

87+
> The `SelectedItemsChanged` event handler cannot be awaited. To execute asynchronous operations when the user selects rows, use the [`OnRowClick`]({%slug grid-events%}#onrowclick) or [`OnRowDoubleClick`]({%slug grid-events%}#onrowdoubleclick) event instead.
88+
8189
>caption Using the Grid SelectedItemsChanged event
8290
8391
````CSHTML
@@ -146,10 +154,6 @@ You can respond to user selection actions through the `SelectedItemsChanged` eve
146154
}
147155
````
148156

149-
### SelectedItemsChanged and Asynchronous Operations
150-
151-
The `SelectedItemsChanged` event handler cannot be awaited. To execute asynchronous operations when the user selects rows, use the [`OnRowClick`]({%slug grid-events%}#onrowclick) or [`OnRowDoubleClick`]({%slug grid-events%}#onrowdoubleclick) event instead.
152-
153157
## Selection When Data Changes
154158

155159
When the Grid `Data` collection changes, the `SelectedItems` collection has the following behavior:

0 commit comments

Comments
 (0)