docs(treelist): Add Cell Selection documentation and revamp Selection… (

#2302)

* docs(treelist): Add Cell Selection documentation and revamp Selection articles

* docs(treelist): Selection polishing

---------

Co-authored-by: Dimo Dimov <[email protected]>

components/grid/events.md

@@ -1058,10 +1058,14 @@ Make sure to update the current page size when using the event.
 
 Fires when [row selection is enabled]({%slug grid-selection-overview%}#enable-row-or-cell-selection) and the user selects or deselects one row or multiple rows, depending on the [selection mode]({%slug grid-selection-overview%}#use-single-or-multiple-selection).
 
+Visit the [Grid Row Selection article to see an example]({%slug grid-selection-row%}#selecteditemschanged-event).
+
 ## SelectedCellsChanged
 
 Fires when [cell selection is enabled]({%slug grid-selection-overview%}#enable-row-or-cell-selection) and the user selects or deselects one cell or multiple cells, depending on the [selection mode]({%slug grid-selection-overview%}#use-single-or-multiple-selection).
 
+Visit the [Grid Cell Selection article to see an example]({%slug grid-selection-cell%}#selectedcellschanged-event).
+
 ## See Also
 
   * [Grid Overview]({%slug grid-overview%})

components/grid/selection/cells.md

@@ -1,7 +1,7 @@
 ---
 title: Cell Selection
 page_title: Grid - Cells Selection
-description: Learn how to select cell  in Blazor Grid component. Explore the selected cells. Discover cell selection bevahior when combined with other Grid features. Try the practical sample code for cell selection.
+description: Learn how to select cell in Blazor Grid component. Explore the selected cells. Discover cell selection bevahior when combined with other Grid features. Try the practical sample code for cell selection.
 slug: grid-selection-cell
 tags: telerik,blazor,grid,selection,cells
 position: 5
@@ -190,7 +190,7 @@ The `GridSelectedCellDescriptor` type exposes the following properties:
 
 When the Grid `Data` collection changes, the `SelectedCells` collection has the following behavior:
 
-* When the user updates a selected cell and the item instance is replaced, you have to also replace the `SelectedCellDescriptor.DataItem` object in the `SelectedCells` collection. Do that in the [Grid `OnUpdate` event]({%slug components/grid/editing/overview%}#events).
+* When the user updates a selected cell and the item instance is replaced, you have to also replace the `DataItem` object in the `SelectedCells` collection. Do that in the [Grid `OnUpdate` event]({%slug components/grid/editing/overview%}#events).
 * When the user deletes a row with selected cells, update the `SelectedCells` collection in the the Grid `OnDelete` event handler.
 * To select cells from a new item in the Grid you can use the [`OnCreate` event]({%slug components/grid/editing/overview%}#events) to update the `SelectedCells` collection.
 

components/grid/selection/overview.md

@@ -27,9 +27,9 @@ You can configure the Grid either for row or cell selection:
   * Add a `<GridSelectionSettings>` tag to the `<GridSettings>` tag, and set the `SelectionType` parameter to `GridSelectionType.Row`.
   * Optionally, you can also select rows through the [checkbox column]({%slug components/grid/columns/checkbox%}).
 * To enable cell selection:
-  * Add a `<GridSelectionSettings>` tag to the `<GridSettings>` tag, and set the `SelectionType` parameter to the `Cell` member of the `Telerik.Blazor.GridSelectionType` enum.
+  * Add a `<GridSelectionSettings>` tag to the `<GridSettings>` tag, and set the `SelectionType` parameter to `GridSelectionType.Cell`.
 
-See [Rows Selection Options]({%slug grid-selection-row%}#basics) and [Cells Selection Options]({%slug grid-selection-cell%}#basics) for more details.
+See [Rows Selection Basics]({%slug grid-selection-row%}#basics) and [Cells Selection Basics]({%slug grid-selection-cell%}#basics) for more details.
 
 ## Use Single or Multiple Selection
 
@@ -48,14 +48,14 @@ The Grid exposes two parameters to get or set its selected rows and cells.
 
 Both parameters support two-way binding. You can also use the parameters to pre-select rows or cells for your users.
 
-See [Selected Rows]({%slug grid-selection-row%}#selected-rows) and [Selected Cells]({%slug grid-selection-cell%}#selected-cells) for more details.
+See [Rows Selection Basics]({%slug grid-selection-row%}#basics) and [Cells Selection Basics]({%slug grid-selection-cell%}#basics) for more details.
 
 ## Events
 
 You can respond to the user action of selecting a new item through the Grid events:
 
-* Use the [`SelectedItemsChanged` event]({%slug grid-selection-row%}#selecteditemschanged) to respond to row selection.
-* Use the [`SelectedCellsChanged` event]({%slug grid-selection-cell%}#selectedcellschanged) to respond to cell selection.
+* Use the [`SelectedItemsChanged` event]({%slug grid-selection-row%}#selecteditemschanged-event) to respond to row selection.
+* Use the [`SelectedCellsChanged` event]({%slug grid-selection-cell%}#selectedcellschanged-event) to respond to cell selection.
 
 ## Integration with Other Grid Features
 

components/grid/selection/rows.md

@@ -81,6 +81,8 @@ You can respond to user selection actions through the `SelectedItemsChanged` eve
 >caption Using the Grid SelectedItemsChanged event
 
 ````CSHTML
+@* Select rows and handle the SelectedItemsChanged event *@
+
 <TelerikGrid Data="@GridData"
              SelectionMode="@GridSelectionMode.Multiple"
              SelectedItems="@SelectedEmployees"
@@ -153,7 +155,7 @@ The `SelectedItemsChanged` event handler cannot be awaited. To execute asynchron
 When the Grid `Data` collection changes, the `SelectedItems` collection has the following behavior:
 
 * When the user updates a selected item and the item instance is replaced, you have to also replace the selected item object in the `SelectedItems` collection. Do that in the [Grid `OnUpdate` event]({%slug components/grid/editing/overview%}#events).
-* When the user deletes a selected item, the Grid automatically deletes it from the `SelectedItems` collection and the [`SelectedItemsChanged` event](#selecteditemschanged) fires.
+* When the user deletes a selected item, the Grid automatically deletes it from the `SelectedItems` collection and the [`SelectedItemsChanged` event](#selecteditemschanged-event) fires.
 * To select a new item in the Grid you can use the [`OnCreate` event]({%slug components/grid/editing/overview%}#events) to update the `SelectedItems` collection.
 
 ## Equals Comparison

components/treelist/columns/checkbox.md

@@ -23,7 +23,7 @@ The TreeList checkbox column has the following exclusive parameters. For other a
 | Parameter | Type and Default Value | Description |
 | --- | --- | --- |
 | `CheckBoxOnlySelection` | `bool` | Determines if row selection occurs only on checkbox clicks. By default, user can select rows by clicking anywhere, except on command buttons. |
-| `SelectAll` | `bool` <br /> (`true`) | Determines if the column header renders a checkbox to select all rows. Set this to `false` if the [TreeList `SelectionMode` is `Single`]({%slug treelist-selection-single%}). The `SelectAll` parameter has no effect when the checkbox column has a [`HeaderTemplate`](#headertemplate). |
+| `SelectAll` | `bool` <br /> (`true`) | Determines if the column header renders a checkbox to select all rows. Set this to `false` if the [TreeList `SelectionMode` is `Single`]({%slug treelist-selection-overview%}#use-single-or-multiple-selection). The `SelectAll` parameter has no effect when the checkbox column has a [`HeaderTemplate`](#headertemplate). |
 | `SelectAllMode` | `TreeListSelectAllMode` enum <br /> (`Current`) | Determines if the header cell checkbox selects all rows on the current page, or all rows in the TreeList. `Current` selects the visible rows on the current page. It does not select the children of collapsed items - they are not part of the [current page]({%slug treelist-paging%}) data. `All` selects all the data items, including ones that may be currently filtered out. |
 | `SelectChildren` | `bool` | Determines if a parent row checkbox affects the selected state of respective child rows. |
 

components/treelist/events.md

@@ -28,6 +28,7 @@ You can read more about the CUD events in the [Editing Overview]({%slug treelist
 * [OnExpand and OnCollapse](#onexpand-and-oncollapse)
 * [Command Button Click](#command-button-click)
 * [SelectedItemsChanged](#selecteditemschanged)
+* [SelectedCellsChanged](#selectedcellschanged)
 * [OnModelInit](#onmodelinit)
 * [OnRowClick](#onrowclick)
 * [OnRowDoubleClick](#onrowdoubleclick)
@@ -168,7 +169,15 @@ The command buttons of a treelist provide an `OnClick` event before firing their
 
 ## SelectedItemsChanged
 
-Fires when the item selection is enabled and the user changes the selected [item]({%slug treelist-selection-single%}#selecteditemschanged-event) or [items]({%slug treelist-selection-multiple%}#selecteditemschanged-event).
+Fires when [row selection is enabled]({%slug treelist-selection-overview%}#enable-row-or-cell-selection) and the user selects or deselects one or multiple rows, depending on the [selection mode]({%slug treelist-selection-overview%}#use-single-or-multiple-selection).
+
+Visit the [TreeList Row Selection article to see an example]({%slug treelist-selection-row%}#selecteditemschanged-event).
+
+## SelectedCellsChanged
+
+Fires when [cell selection is enabled]({%slug treelist-selection-overview%}#enable-row-or-cell-selection) and the user selects or deselects one cell or multiple cells, depending on the [selection mode]({%slug treelist-selection-overview%}#use-single-or-multiple-selection).
+
+Visit the [TreeList Cell Selection article to see an example]({%slug treelist-selection-cell%}#selectedcellschanged-event).
 
 ## OnModelInit