991760: Updated the UG content and samples for Selection in Blazor DataGrid

Author: SadhanaBaskaran

blazor/datagrid/cell-selection.md

@@ -22,8 +22,6 @@ To enable single cell selection:
 - Set the [GridSelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) property to **Cell**.
 - Set the [GridSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Type) property to **Single**.
 
-The following example demonstrates how to enable single cell selection using these properties.
-
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
@@ -110,8 +108,6 @@ To enable multiple cell selection:
 - Set the [GridSelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) property to **Cell**.
 - Set the [GridSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Type) property to **Multiple**.
 
-The following example demonstrates how to enable multiple cell selection using these properties.
-
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
@@ -199,7 +195,6 @@ The Grid supports three types of cell selection modes, configurable via the [Gri
 2. **Box:** Enables selection of a rectangular range of cells between specified start and end column indexes, including all rows within the defined range. Useful for column-specific selections.
 3. **BoxWithBorder:** Similar to Box, but adds a visual border around the selected cell range for easier identification.
 
-
 Cell selection requires the [GridSelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) to be set to **Cell** or **Both**, and the [GridSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Type) to be **Multiple**.
 
 The following example demonstrates how to dynamically enable and change the `GridSelectionSettings.CellSelectionMode` using a  [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app).
@@ -301,16 +296,14 @@ public class OrderDetails
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LjVeDSKXKGvShjyg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-## Select cells externally
+## Select cells via programmatically
 
-Single cell selection, multiple cell selection, and range-based cell selection can be performed externally in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid using built-in methods. These APIs allow programmatic interaction with specific cells in the Grid.
+Single cell selection, multiple cell selection, and range-based cell selection can be performed externally in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid using built-in methods. These API's allow programmatic interaction with specific cells in the Grid.
 
 ### Single cell selection
 
 To select a single cell programmatically, use the [SelectCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectCellAsync_System_ValueTuple_System_Int32_System_Int32__System_Nullable_System_Boolean__) method. This method selects a cell based on the specified row and column indexes.
 
-The following example demonstrates how to select a single cell by retrieving the row and cell indexes from a [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) and passing them to the `SelectCellAsync` method. When the **Select cell** button is clicked, the specified cell is selected in the Grid.
-
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
@@ -408,8 +401,6 @@ Multiple cell selection in the Syncfusion<sup style="font-size:70%">&reg;</sup>
 
 To perform multiple cell selection programmatically, use the [SelectCellsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectCellsAsync_System_ValueTuple_System_Int32_System_Int32____) method. This method accepts a collection of row and column index pairs to define the target cells.
 
-The following example demonstrates how to select multiple cells by calling the `SelectCellsAsync` method within a button click event and passing a collection of row and column indexes as arguments.
-
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
@@ -512,8 +503,6 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides a
 
 To retrieve the selected indexes, use the [GetSelectedRowCellIndexesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetSelectedRowCellIndexesAsync) method.
 
-The following example demonstrates how to obtain the selected row and cell indexes using the `GetSelectedRowCellIndexesAsync` method and display them in a dialog when a button is clicked.
-
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
@@ -617,14 +606,12 @@ public class OrderDetails
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LNryZyZyzmehMywJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-## Clear cell selection programmatically
+## Clear selection via programmatically
 
 Clearing cell selection programmatically in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid is useful when you need to remove existing cell selections based on user actions or application logic. This can be achieved using the [ClearCellSelectionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearCellSelectionAsync) method.
 
 The `ClearCellSelectionAsync` method is applicable when the [GridSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Type) property is set to **Multiple** or **Single**.
 
-The following example demonstrates how to clear cell selection by invoking the `ClearCellSelectionAsync` method within a button click event.
-
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
@@ -718,8 +705,6 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides mu
 
 * [CellDeselected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_CellDeselected): Triggered after a selected cell is deselected. This event can be used to perform actions or cleanup tasks when a cell is no longer selected.
 
-In the example below, cell selection is canceled when the **ShipCountry** value is **France** using the `CellSelecting` event. Similarly, cell deselection is canceled when the **OrderID** value is **even** using the `CellDeselecting` event. A notification message is displayed to indicate which event was triggered during cell interaction.
-
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 

blazor/datagrid/checkbox-selection.md

@@ -12,8 +12,6 @@ documentation: ug
 Checkbox selection in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables to select multiple records using checkboxes rendered in each row. This feature is especially useful for performing bulk actions or operations on selected records.
 To display a checkbox in each Grid row, configure a column with its [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type) property set to [CheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnType.html#Syncfusion_Blazor_Grids_ColumnType_CheckBox).
 
-The following example demonstrates how to enable checkbox selection using the `Type` property in the Grid.
-
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
@@ -87,7 +85,7 @@ public class OrderDetails
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LNBoNTicUWFQPhGN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 > * By default, selection is allowed by clicking either a Grid row or the checkbox in that row. To restrict selection to checkbox clicks only, set the [GridSelectionSettings.CheckboxOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CheckboxOnly) property to **true**.
-> * To persist selection across Grid operations, enable the [GridSelectionSettings.PersistSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_PersistSelection) property. Ensure that one of the columns is defined as a primary key using the GridColumn.IsPrimaryKey property.
+> * To persist selection across Grid operations, enable the [GridSelectionSettings.PersistSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_PersistSelection) property. Ensure that one of the columns is defined as a primary key using the **GridColumn.IsPrimaryKey** property.
 
 ## Checkbox selection mode
 
@@ -96,8 +94,6 @@ The checkbox selection mode in the Syncfusion<sup style="font-size:70%">&reg;</s
 * **Default**: This is the default value of `CheckboxMode`. In this mode, multiple rows can be selected by clicking on them individually. When a row is clicked, its corresponding checkbox is automatically checked.
 * **ResetOnRowClick**: In this mode, clicking on a row resets the previously selected row. To perform multiple selections, hold the **Ctrl** key while clicking the desired rows. To select a range of rows, hold the **Shift** key and click the target rows.
 
-The following example demonstrates how to dynamically enable and change the `CheckboxMode` using a [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app).
-
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
@@ -243,8 +239,6 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows cust
 
 By default, setting the column [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type) to **CheckBox** renders a checkbox column with a SelectAll checkbox in the header. To hide the header checkbox, define an empty [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTemplate)  in the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html).
 
-The following example demonstrates how to hide the SelectAll checkbox in the column header using an empty `HeaderTemplate`.
-
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
@@ -325,8 +319,6 @@ public class OrderDetails
 
 By default, the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows selection by clicking either a Grid row or the checkbox within that row. To restrict selection so that it can only be performed through checkbox clicks, set the  [GridSelectionSettings.CheckboxOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CheckboxOnly) property to **true**.
 
-The following example demonstrates how to enable selection exclusively through checkbox clicks using the `CheckboxOnly` property.
-
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}