984957: Updated the UG content and samples for Row in Blazor DataGrid

Author: SadhanaBaskaran

blazor/datagrid/detail-template.md

@@ -21,11 +21,9 @@ For an overview of the `detail template` in the grid, watch the following video.
 To integrate the detail template in the grid:
 
 1. Add the <DetailTemplate> element within the <GridTemplates> component to define the detail row content.
-2. Use any HTML structure or Blazor components inside the DetailTemplate to render custom content for each expanded row.
+2. Use any HTML structure or Blazor components inside the **DetailTemplate** to render custom content for each expanded row.
 3. Optionally, bind data to the template to display information corresponding to the expanded row.
 
-The following example demonstrates using `DetailTemplate` to display additional details for each row:
-
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 @page "/"
@@ -182,8 +180,6 @@ Use the [ExpandCollapseDetailRowAsync](https://help.syncfusion.com/cr/blazor/Syn
 
 > Alternatively, call `ExpandCollapseDetailRowAsync` with the row data object in the `DataBound` event.
 
-The following example expands the record with `EmployeeID` equal to 1 by invoking `ExpandCollapseDetailRowAsync` in the `DataBound` event:
-
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
@@ -309,7 +305,7 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can render
 
 To render a custom component or build a hierarchical grid inside the detail row, define the template in the [DetailTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_DetailTemplate) within the `GridTemplates` section. The hierarchical DataGrid displays data in expandable or collapsible levels using the expand or collapse button, or custom content such as HTML elements.
 
-The following example uses the detail template to display parent–child data in a hierarchical structure with multiple levels (Employee → Orders → Customers):
+The following example uses the detail template to display parent–child data in a hierarchical structure with multiple levels (**Employee → Orders → Customers**):
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -480,8 +476,6 @@ A template column in a detail grid within the Syncfusion<sup style="font-size:70
 
 Use the `Template` property of a column to display custom content instead of the field value.
 
-The following example shows a custom image in the `Employee Image` column of the detail grid using the column `Template`:
-
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
@@ -841,8 +835,6 @@ public static List<EmployeeData> Employees = new List<EmployeeData>();
 
 To expand or collapse a specific detail row programmatically, use [ExpandCollapseDetailRowAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExpandCollapseDetailRowAsync__0_) and pass the corresponding row data object.
 
-The following example expands or collapses a specific employee’s detail row when the button is clicked.
-
 In the example, the `Expand` method validates the row index and then invokes `ExpandCollapseDetailRowAsync` with the selected row’s data:
 
 {% tabs %}
@@ -1438,8 +1430,6 @@ Use the [RowDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.G
 
 ```
 
-The following example hides the expand/collapse icon for the row with `EmployeeID` equal to `1` when no child records exist:
-
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
@@ -1577,8 +1567,6 @@ public class OrderData
 
 Aggregates display summary values in the footer, group footer, or group caption of the detail grid. Use this feature to calculate and show summary information.
 
-The following example renders aggregates in a detail grid to display the sum and maximum values of the `Freight` column:
-
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
@@ -2082,7 +2070,7 @@ To customize the appearance of the group expand/collapse icons in the detail Gri
 }
 ```
 
-In this example, the `.e-icon-gdownarrow` and `.e-icon-grightarrow` classes target the expand and collapse icons, respectively. Modify the `content` property to change the icon displayed. You can use the available [Syncfusion<sup style="font-size:70%">&reg;</sup> icons](https://blazor.syncfusion.com/documentation/appearance/icons) based on your theme.
+In this example, the `.e-icon-gdownarrow` and `.e-icon-grightarrow` classes target the expand and collapse icons, respectively. Modify the `content` property to change the icon displayed. [Syncfusion<sup style="font-size:70%">&reg;</sup> icons](https://blazor.syncfusion.com/documentation/appearance/icons) sets can be used based on the selected theme.
 
 ![Detail Grid group expand or collapse icons in Blazor](images/hierarchy-grid/grid-child-group-expand-or-collapse-icons.png)
 
@@ -2282,13 +2270,11 @@ In this example, the `.e-cellselectionbackground` class targets the background c
 
 Detail template is not supported with the following features:
 
-* Frozen rows and columns
 * Immutable mode
 * Infinite scrolling
 * Virtual scrolling
 * Print
 * Row template
-* Row spanning
-* Column spanning
 * Lazy load grouping
-* State persistence
+* State persistence
+* Row and Column Spanning

blazor/datagrid/row-drag-and-drop.md

@@ -18,9 +18,7 @@ Enable row drag and drop by setting [AllowRowDragAndDrop](https://help.syncfusio
 
 ## Drag and drop within DataGrid
 
-The drag and drop feature enables reordering of rows within the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid using the drag handle. Set the [AllowRowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowRowDragAndDrop) property to `true` to enable this feature. By default, the value is `false`.
-
-Here is an example that enables row drag and drop within the grid:
+The drag and drop feature enables reordering of rows within the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid using the drag handle. Set the [AllowRowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowRowDragAndDrop) property to **true** to enable this feature. By default, the value is **false**.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -106,9 +104,7 @@ Here is an example that enables row drag and drop within the grid:
 ## Drag and drop to DataGrid
 
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports dragging rows from one grid and dropping them into another. Enable this feature by setting the [AllowRowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowRowDragAndDrop) property to `true` on both grids. To specify the target grid, configure the [RowDropSettings.TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_TargetID) property with the target grid's ID.
-
-The following example enables row drag and drop between two grids:
+The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports dragging rows from one grid and dropping them into another. Enable this feature by setting the [AllowRowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowRowDragAndDrop) property to **true** on both grids. To specify the target grid, configure the [RowDropSettings.TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_TargetID) property with the target grid's ID.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -287,7 +283,7 @@ public class OrdersDetails
 
 ## Drag and drop to custom component
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports dragging rows into custom components. Enable [AllowRowDragAndDrop] and set [RowDropSettings.TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_TargetID) to the `ID` of the target component.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports dragging rows into custom components. Enable [AllowRowDragAndDrop] and set [RowDropSettings.TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_TargetID) to the **ID** of the target component.
 
 In the following example, selected grid rows are dropped into a TreeGrid using the [RowDropped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDropped) event. After the drop, the corresponding rows are removed from the source grid and added to the target:
 
@@ -795,4 +791,4 @@ public class OrderData
 - A single row can be dragged and dropped within the same grid even if multiple selection is not enabled.
 - Row drag and drop does not have built-in support when combined with sorting, filtering, hierarchy grid, or row template features.
 - Row drag and drop with grouping does not support lazy-load grouping.
-- Drag and drop within the same group key is not supported. Dragging multiple rows from different grouped collections is not supported.
+- Dragging and dropping within the same group key is not supported. The grid does not allow drag-and-drop for multiple rows that belong to different grouped collections.

blazor/datagrid/row-template.md

@@ -21,8 +21,6 @@ For an overview of `row templates` in the Grid, watch the following video.
 
 {% youtube "youtube:https://www.youtube.com/watch?v=Dft0kerEGUQ" %}
 
-The following example demonstrates a row template that displays employee information with a photo in the first column and details such as name, address, and other fields in the second column for each row.
-
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
@@ -197,8 +195,6 @@ Typically, the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid
 
 To format values inside a row template, apply .NET formatting in the template (for example, using `ToString` with a format string) or invoke a helper method to produce the desired output such as dates, currency, or custom text.
 
-The following example formats the hire date within the template using a custom date format:
-
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
@@ -518,8 +514,6 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports em
 
 To render a Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart in a row template, use the [RowTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_RowTemplate) property to define the row layout and include the chart markup within the template.
 
-The following example renders a Syncfusion<sup style="font-size:70%">&reg;</sup> chart alongside order details in each row:
-
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 @page "/"

blazor/datagrid/row.md

@@ -227,9 +227,6 @@ To change the background color of the selected row, add the following CSS:
     background-color: #f9920b;
 }
 ```
-
-The following example uses the `.e-selectionbackground` class to style the selected row:
-
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
@@ -317,8 +314,6 @@ public class OrderData
 
 The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports customizing row height to display more or less content as needed. Use the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowHeight) property to change the height of all rows in the Grid.
 
-The following example demonstrates dynamically changing the row height using the `RowHeight` property:
-
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
@@ -425,8 +420,6 @@ public class OrderData
 
 Customize the row height for a specific row when a single record needs additional space or emphasis. Use the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowHeight) property in combination with the [RowDataBound](https://blazor.syncfusion.com/documentation/datagrid/events#rowdatabound) event to apply a CSS class conditionally.
 
-In the following example, the row with `OrderID` '10249' is assigned a custom height via a CSS class in the `RowDataBound` event:
-
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
@@ -524,9 +517,7 @@ public class OrderData
 
 The row hover feature applies a visual effect when the mouse pointer is over a row, improving readability and helping to identify the focused record. Enable or disable the effect using the [EnableHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableHover) property.
 
-By default, `EnableHover` is `true`. Set it to `false` to disable row hover.
-
-The following example enables or disables row hover using a [Switch](https://blazor.syncfusion.com/documentation/toggle-switch-button/getting-started-webapp) component:
+By default, `EnableHover` is **true**. Set it to **false** to disable row hover.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -617,9 +608,7 @@ The following example enables or disables row hover using a [Switch](https://bla
 
 ## Row pinning (Frozen)
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can freeze rows to keep them visible while scrolling vertically through large datasets. This maintains important context as users navigate data.
-
-To know about frozen rows in Grid, you can check this video.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides an option to freeze rows, keeping them visible while scrolling vertically through large datasets. This feature helps maintain important information in view for better readability.
 
 {% youtube "youtube:https://www.youtube.com/watch?v=L2NvKyBomhM"%}
 
@@ -746,8 +735,6 @@ Apply the following CSS to change the default line color:
 }
 ```
 
-The following example demonstrates changing the frozen rows’ line color using CSS:
-
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
@@ -851,10 +838,9 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports pr
 
 The `AddRecordAsync` method takes two parameters:
 
-> The **data** object representing the new row to be added  
-> The **index** at which the new row should be inserted. If no index is specified, the new row is added at the end.
+ - The **data** object representing the new row to be added  
+ - The **index** at which the new row should be inserted. If no index is specified, the new row is added at the end.
 
-The following example shows how to add a new row using `AddRecordAsync`:
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -1032,8 +1018,6 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can display
 
 Use the [RowSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowSelected) event on the master Grid to obtain the selected record. Apply a filter through the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Query) property of the detail Grid and bind the resulting collection to its [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource).
 
-In the following sample, selecting a row in the master Grid displays the corresponding orders in the detail Grid:
-
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}