();
The Syncfusion® Blazor DataGrid supports hiding the expand/collapse icon in parent rows when no records exist in the detail grid. This creates a cleaner and more intuitive interface by removing unnecessary icons from empty parent rows.
-Use the [RowDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDataBound) event to check whether the detail grid has records for the current row and add a custom class to disable and hide the icon. Apply the following CSS to prevent interaction and hide the icon:
+Use the [RowDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDataBound) event to check whether the detail DataGrid has records for the current row and add a custom class to disable and hide the icon. Apply the following CSS to prevent interaction and hide the icon:
```css
@@ -1565,7 +1567,7 @@ public class OrderData
## Render aggregates in detail DataGrid
-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.
+Aggregates display summary values in the footer, group footer, or group caption of the detail DataGrid. Use this feature to calculate and show summary information.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -1719,15 +1721,15 @@ public class OrderData
## Customize the detail Blazor DataGrid
-The Syncfusion® Blazor DataGrid offers multiple ways to customize the detail grid appearance using CSS or themes. Target detail grid elements with the `.e-detailcell` class selector.
+The Syncfusion® Blazor DataGrid offers multiple ways to customize the detail DataGrid appearance using CSS or themes. Target detail DataGrid elements with the `.e-detailcell` class selector.
### Header
-Customize header elements in the detail grid using CSS. The following examples style the header, header cells, and header cell content.
+Customize header elements in the detail DataGrid using CSS. The following examples style the header, header cells, and header cell content.
-**Customizing the Detail Grid Header**
+**Customizing the Detail DataGrid Header**
-To customize the appearance of the detail grid header root element, use the following CSS:
+To customize the appearance of the detail DataGrid header root element, use the following CSS:
```css
.e-detailcell .e-grid .e-headercontent{
@@ -1738,9 +1740,9 @@ In this example, the `.e-detailcell` class targets the detail grid, and `.e-head
-**Customizing the Detail Grid Header Cell**
+**Customizing the Detail DataGrid Header Cell**
-To customize the appearance of header cell elements in the detail grid, use the following CSS:
+To customize the appearance of header cell elements in the detail DataGrid, use the following CSS:
```css
.e-detailcell .e-grid .e-headercontent .e-headercell{
@@ -1748,13 +1750,13 @@ To customize the appearance of header cell elements in the detail grid, use the
background-color: #1ea8bd;
}
```
-In this example, the `.e-headercell` class targets the header cells within the detail grid. Adjust the `color` and `background-color` properties to match the application's design requirements.
+In this example, the `.e-headercell` class targets the header cells within the detail DataGrid. Adjust the `color` and `background-color` properties to match the application's design requirements.
**Customizing the Detail Grid Header Cell Div Element**
-To customize the appearance of the header cell div element in the detail grid, use the following CSS:
+To customize the appearance of the header cell div element in the detail DataGrid, use the following CSS:
```css
.e-detailcell .e-grid .e-headercelldiv {
@@ -1769,11 +1771,11 @@ In this example, the `.e-headercelldiv` class targets the div element within the
### Paging
-Customize paging elements in the detail grid using CSS. The following examples style the pager root, container, navigation elements, numeric links, and current page indicator.
+Customize paging elements in the detail DataGrid using CSS. The following examples style the pager root, container, navigation elements, numeric links, and current page indicator.
-**Customizing the Detail Grid Pager Root Element**
+**Customizing the Detail DataGrid Pager Root Element**
-To customize the appearance of the pager root element in the detail grid, use the following CSS:
+To customize the appearance of the pager root element in the detail DataGrid, use the following CSS:
```css
.e-detailcell .e-grid .e-gridpager {
@@ -1781,13 +1783,13 @@ To customize the appearance of the pager root element in the detail grid, use th
background-color: #deecf9;
}
```
-In this example, the `.e-detailcell` class targets the detail grid, and `.e-gridpager` targets the pager root element. The `font-family` and `background-color` properties control the font style and background color of the pager section.
+In this example, the `.e-detailcell` class targets the detail DataGrid, and `.e-gridpager` targets the pager root element. The `font-family` and `background-color` properties control the font style and background color of the pager section.
-**Customizing the Detail Grid Pager Container Element**
+**Customizing the Detail DataGrid Pager Container Element**
-To customize the appearance of the pager container element in the detail grid, use the following CSS:
+To customize the appearance of the pager container element in the detail DataGrid, use the following CSS:
```css
.e-detailcell .e-grid .e-pagercontainer {
@@ -1795,13 +1797,13 @@ To customize the appearance of the pager container element in the detail grid, u
font-family: cursive;
}
```
-In this example, the `.e-pagercontainer` class targets the pager container element within the detail grid. The `border` and `font-family` properties control the border styling and font appearance of the pager container.
+In this example, the `.e-pagercontainer` class targets the pager container element within the detail DataGrid. The `border` and `font-family` properties control the border styling and font appearance of the pager container.
-**Customizing the Detail Grid Pager Navigation Elements**
+**Customizing the Detail DataGrid Pager Navigation Elements**
-To customize the appearance of the detail Grid pager navigation elements, use the following CSS code:
+To customize the appearance of the detail DataGrid pager navigation elements, use the following CSS code:
```css
.e-detailcell .e-grid .e-gridpager .e-prevpagedisabled,
@@ -1820,9 +1822,9 @@ In this example, the classes `.e-prevpagedisabled`, `.e-prevpage`, `.e-nextpage`
-**Customizing the Detail Grid Pager Page Numeric Link Elements**
+**Customizing the Detail DataGrid Pager Page Numeric Link Elements**
-To customize the appearance of the detail Grid pager current page numeric link elements, use the following CSS code:
+To customize the appearance of the detail DataGrid pager current page numeric link elements, use the following CSS code:
```css
.e-detailcell .e-grid .e-gridpager .e-numericitem {
@@ -1841,9 +1843,9 @@ In this example, the `.e-numericitem` class targets the page numeric link elemen
-**Customizing the Detail Grid Pager Current Page Numeric Element**
+**Customizing the Detail DataGrid Pager Current Page Numeric Element**
-To customize the appearance of the detail Grid pager current page numeric element, use the following CSS code:
+To customize the appearance of the detail DataGrid pager current page numeric element, use the following CSS code:
```css
.e-detailcell .e-grid .e-gridpager .e-currentitem {
@@ -1858,11 +1860,11 @@ In this example, the `.e-currentitem` class targets the current page numeric ite
### Sorting
-Customize sorting icons and multi-sorting indicators in the detail grid using CSS. Icon glyphs can vary by theme; refer to the Syncfusion® [icons](https://blazor.syncfusion.com/documentation/appearance/icons#bootstrap-5) for theme-specific codes.
+Customize sorting icons and multi-sorting indicators in the detail DataGrid using CSS. Icon glyphs can vary by theme; refer to the Syncfusion® [icons](https://blazor.syncfusion.com/documentation/appearance/icons#bootstrap-5) for theme-specific codes.
**Customizing the Detail Grid Sorting Icon**
-To customize the sorting icon that appears in the detail Grid header when sorting is applied, use the following CSS code:
+To customize the sorting icon that appears in the detail DataGrid header when sorting is applied, use the following CSS code:
```css
.e-detailcell .e-grid .e-icon-ascending::before {
@@ -1876,13 +1878,13 @@ To customize the sorting icon that appears in the detail Grid header when sortin
}
```
-In this example, the `.e-detailcell` class targets the detail Grid. The `.e-icon-ascending::before` class targets the sorting icon for ascending order, and the `.e-icon-descending::before` class targets the sorting icon for descending order.
+In this example, the `.e-detailcell` class targets the detail DataGrid. The `.e-icon-ascending::before` class targets the sorting icon for ascending order, and the `.e-icon-descending::before` class targets the sorting icon for descending order.
-**Customizing the Detail Grid Multi Sorting Icon**
+**Customizing the Detail DataGrid Multi Sorting Icon**
-To customize the multi sorting icon that appears in the detail Grid header when multiple columns are sorted, use the following CSS code:
+To customize the multi sorting icon that appears in the detail DataGrid header when multiple columns are sorted, use the following CSS code:
```css
.e-detailcell .e-grid .e-sortnumber {
@@ -1897,11 +1899,11 @@ In this example, the `.e-sortnumber` class targets the background color and font
### Filtering
-Customize filtering elements in the detail grid using CSS. The following examples apply to the filter bar and Excel/menu filter UI depending on the configured filter mode.
+Customize filtering elements in the detail DataGrid using CSS. The following examples apply to the filter bar and Excel/menu filter UI depending on the configured filter mode.
**Customizing the Detail Grid Filter Bar Cell Element**
-To customize the appearance of the filter bar cell element in the detail Grid header, use the following CSS code:
+To customize the appearance of the filter bar cell element in the detail DataGrid header, use the following CSS code:
```css
.e-detailcell .e-grid .e-filterbar .e-filterbarcell {
@@ -1909,13 +1911,13 @@ To customize the appearance of the filter bar cell element in the detail Grid he
}
```
-In this example, the `.e-detailcell` class targets the detail Grid, and the `.e-filterbarcell` class targets the filter bar cell element in the header. Modify the `background-color` property to change the color of the filter bar cell element.
+In this example, the `.e-detailcell` class targets the detail DataGrid, and the `.e-filterbarcell` class targets the filter bar cell element in the header. Modify the `background-color` property to change the color of the filter bar cell element.
-**Customizing the Detail Grid Filter Bar Input Element**
+**Customizing the Detail DataGrid Filter Bar Input Element**
-To customize the appearance of the filter bar input element in the detail Grid header, use the following CSS code:
+To customize the appearance of the filter bar input element in the detail DataGrid header, use the following CSS code:
```css
.e-detailcell .e-grid .e-filterbarcell .e-input-group input.e-input{
@@ -1927,9 +1929,9 @@ In this example, the `.e-filterbarcell` class targets the filter bar cell elemen
-**Customizing the Detail Grid Filter Bar Input Focus**
+**Customizing the Detail DataGrid Filter Bar Input Focus**
-To customize the appearance of the detail Grid's filter bar input element focus highlight, use the following CSS code:
+To customize the appearance of the detail DataGrid's filter bar input element focus highlight, use the following CSS code:
```css
.e-detailcell .e-grid .e-filterbarcell .e-input-group.e-input-focus{
@@ -1941,9 +1943,9 @@ In this example, the `.e-filterbarcell` class targets the filter bar cell elemen
-**Customizing the Detail Grid Filter Bar Input Clear Icon**
+**Customizing the Detail DataGrid Filter Bar Input Clear Icon**
-To customize the appearance of the detail Grid's filter bar input element clear icon, use the following CSS code:
+To customize the appearance of the detail DataGrid's filter bar input element clear icon, use the following CSS code:
```css
.e-detailcell .e-grid .e-filterbarcell .e-input-group .e-clear-icon::before {
@@ -1955,9 +1957,9 @@ In this example, the `.e-clear-icon` class targets the clear icon element within
-**Customizing the Detail Grid Filtering Icon**
+**Customizing the Detail DataGrid Filtering Icon**
-To customize the appearance of the filtering icon in the detail Grid header, use the following CSS code:
+To customize the appearance of the filtering icon in the detail DataGrid header, use the following CSS code:
```css
.e-detailcell .e-grid .e-icon-filter::before{
@@ -1969,9 +1971,9 @@ In this example, the `.e-icon-filter` class targets the filtering icon element.
-**Customizing the Detail Grid Filter Dialog Content**
+**Customizing the Detail DataGrid Filter Dialog Content**
-To customize the appearance of the detail Grid's filter dialog content element, use the following CSS code:
+To customize the appearance of the detail DataGrid's filter dialog content element, use the following CSS code:
```css
.e-detailcell .e-grid .e-filter-popup .e-dlg-content {
@@ -1985,7 +1987,7 @@ In this example, the `.e-filter-popup .e-dlg-content` classes target the content
**Customizing the Detail Grid Filter Dialog Footer**
-To customize the appearance of the detail Grid's filter dialog footer element, use the following CSS code:
+To customize the appearance of the detail DataGrid's filter dialog footer element, use the following CSS code:
```css
.e-detailcell .e-grid .e-filter-popup .e-footer-content {
@@ -1997,9 +1999,9 @@ In this example, the `.e-filter-popup .e-footer-content `classes target the foot
-**Customizing the Detail Grid Filter Dialog Input Element**
+**Customizing the Detail DataGrid Filter Dialog Input Element**
-To customize the appearance of the detail Grid's filter dialog input elements, use the following CSS code:
+To customize the appearance of the detail DataGrid's filter dialog input elements, use the following CSS code:
```css
.e-detailcell .e-grid .e-filter-popup .e-input-group input.e-input{
@@ -2011,9 +2013,9 @@ In this example, the **.e-filter-popup** class targets the filter dialog, and th
-**Customizing the Detail Grid Filter Dialog Button Element**
+**Customizing the Detail DataGrid Filter Dialog Button Element**
-To customize the appearance of the detail Grid's filter dialog button elements, use the following CSS code:
+To customize the appearance of the detail DataGrid's filter dialog button elements, use the following CSS code:
```css
.e-detailcell .e-grid .e-filter-popup .e-btn{
@@ -2025,9 +2027,9 @@ In this example, the `.e-filter-popup` class targets the filter dialog, and the
-**Customizing the Detail Grid Excel Filter Dialog Number Filters Element**
+**Customizing the Detail DataGrid Excel Filter Dialog Number Filters Element**
-To customize the appearance of the Excel filter dialog's number filters in the detail Grid, use the following CSS code:
+To customize the appearance of the Excel filter dialog's number filters in the detail DataGrid, use the following CSS code:
```css
.e-detailcell .e-grid .e-filter-popup .e-contextmenu {
@@ -2041,11 +2043,11 @@ In this example, the `.e-filter-popup .e-contextmenu` classes target the number
### Grouping
-Customize grouping elements in the detail grid using CSS. The following examples style the group header, expand/collapse icons, caption row, and indent cell.
+Customize grouping elements in the detail DataGrid using CSS. The following examples style the group header, expand/collapse icons, caption row, and indent cell.
-**Customizing the Detail Grid Group Header**
+**Customizing the Detail DataGrid Group Header**
-To customize the appearance of the detail Grid's group header element, use the following CSS code:
+To customize the appearance of the detail DataGrid's group header element, use the following CSS code:
```css
.e-detailcell .e-grid .e-groupdroparea {
@@ -2053,13 +2055,13 @@ To customize the appearance of the detail Grid's group header element, use the f
}
```
-In this example, the `.e-detailcell` class targets the detail Grid and the `.e-groupdroparea` class targets the group header element. Modify the `background-color` property to change the color of the group header.
+In this example, the `.e-detailcell` class targets the detail DataGrid and the `.e-groupdroparea` class targets the group header element. Modify the `background-color` property to change the color of the group header.
-**Customizing the Detail Grid Group Expand or Collapse Icons**
+**Customizing the Detail DataGrid Group Expand or Collapse Icons**
-To customize the appearance of the group expand/collapse icons in the detail Grid, use the following CSS code:
+To customize the appearance of the group expand/collapse icons in the detail DataGrid, use the following CSS code:
```css
.e-detailcell .e-grid .e-icon-gdownarrow::before{
@@ -2074,9 +2076,9 @@ In this example, the `.e-icon-gdownarrow` and `.e-icon-grightarrow` classes targ
-**Customizing the Detail Grid Group Caption Row**
+**Customizing the Detail DataGrid Group Caption Row**
-To customize the appearance of the detail Grid's group caption row and the icons indicating record expansion or collapse, use the following CSS code:
+To customize the appearance of the detail DataGrid's group caption row and the icons indicating record expansion or collapse, use the following CSS code:
```css
.e-detailcell .e-grid .e-groupcaption {
@@ -2093,9 +2095,9 @@ In this example, the `.e-groupcaption` class targets the group caption row eleme
-**Customizing the Detail Grid Grouping Indent Cell**
+**Customizing the Detail DataGrid Grouping Indent Cell**
-To customize the appearance of the detail Grid's grouping indent cell element, use the following CSS code:
+To customize the appearance of the detail DataGrid's grouping indent cell element, use the following CSS code:
```css
.e-detailcell .e-grid .e-indentcell {
@@ -2109,11 +2111,11 @@ In this example, the **.e-indentcell** class targets the grouping indent cell el
### Toolbar
-Customize the toolbar appearance in the detail grid using CSS. The following examples style the toolbar root and button elements.
+Customize the toolbar appearance in the detail DataGrid using CSS. The following examples style the toolbar root and button elements.
-**Customizing the Detail Grid toolbar Root Element**
+**Customizing the Detail DataGrid toolbar Root Element**
-To customize the appearance of the detail Grid's toolbar root element, use the following CSS code:
+To customize the appearance of the detail DataGrid's toolbar root element, use the following CSS code:
```css
.e-detailcell .e-grid .e-toolbar-items {
@@ -2121,13 +2123,13 @@ To customize the appearance of the detail Grid's toolbar root element, use the f
}
```
-In this example, the `.e-detailcell` class targets the detail Grid and the `.e-toolbar-items` class targets the background color of the toolbar root element. Modify the `background-color` property to change the background color of the toolbar.
+In this example, the `.e-detailcell` class targets the detail DataGrid and the `.e-toolbar-items` class targets the background color of the toolbar root element. Modify the `background-color` property to change the background color of the toolbar.
-**Customizing the Detail Grid Toolbar Button Element**
+**Customizing the Detail DataGrid Toolbar Button Element**
-To customize the appearance of the detail Grid's toolbar buttons, use the following CSS code:
+To customize the appearance of the detail DataGrid's toolbar buttons, use the following CSS code:
```css
.e-detailcell .e-grid .e-toolbar .e-btn {
@@ -2141,11 +2143,11 @@ In this example, the `.e-toolbar .e-btn` selector targets the background color o
### Editing
-Customize editing-related elements in the detail grid using CSS. The following examples style edited/added rows, inputs, edit dialog, and command buttons.
+Customize editing-related elements in the detail DataGrid using CSS. The following examples style edited/added rows, inputs, edit dialog, and command buttons.
-**Customizing the Detail Grid Edited and Added Row Element**
+**Customizing the Detail DataGrid Edited and Added Row Element**
-To customize the appearance of edited and added row table elements in the detail Grid, use the following CSS code:
+To customize the appearance of edited and added row table elements in the detail DataGrid, use the following CSS code:
```css
.e-detailcell .e-grid .e-editedrow table,
@@ -2158,9 +2160,9 @@ In this example, the `.e-editedrow` class represents the edited row element, and
-**Customizing the Detail Grid Edited Row Input Element**
+**Customizing the Detail DataGrid Edited Row Input Element**
-To customize the appearance of edited row input elements in the detail Grid, use the following CSS code:
+To customize the appearance of edited row input elements in the detail DataGrid, use the following CSS code:
```css
.e-detailcell .e-grid .e-editedrow .e-input-group input.e-input{
@@ -2172,9 +2174,9 @@ In this example, the `.e-editedrow` class represents the edited row element, and
-**Customizing the Detail Grid Edit Dialog Header Element**
+**Customizing the Detail DataGrid Edit Dialog Header Element**
-To customize the appearance of the edit dialog header element in the detail Grid, use the following CSS code:
+To customize the appearance of the edit dialog header element in the detail DataGrid, use the following CSS code:
```css
.e-edit-dialog .e-dlg-header-content {
@@ -2185,9 +2187,9 @@ In this example, the `.e-edit-dialog` class represents the edit dialog, and the
-**Customizing the Detail Grid Command Column Buttons**
+**Customizing the Detail DataGrid Command Column Buttons**
-To customize the appearance of the detail Grid's command column buttons such as `Edit`, `Delete`, `Update`, and `Cancel`, use the following CSS code:
+To customize the appearance of the detail DataGrid's command column buttons such as `Edit`, `Delete`, `Update`, and `Cancel`, use the following CSS code:
```css
.e-detailcell .e-grid .e-delete::before ,.e-grid .e-cancel-icon::before{
@@ -2204,11 +2206,11 @@ In this example, the `.e-edit`, `.e-delete`, `.e-update`, and `.e-cancel-icon` c
### Aggregate
-Customize aggregate elements in the detail grid using CSS. The following examples style the aggregate root and aggregate cells.
+Customize aggregate elements in the detail DataGrid using CSS. The following examples style the aggregate root and aggregate cells.
**Customizing the Detail Grid Aggregate Root Element**
-To customize the appearance of the detail Grid's aggregate root elements, use the following CSS code:
+To customize the appearance of the detail DataGrid's aggregate root elements, use the following CSS code:
```css
@@ -2217,13 +2219,13 @@ To customize the appearance of the detail Grid's aggregate root elements, use th
}
```
-In this example, the `.e-gridfooter` class represents the root element of the aggregate row in the grid footer. Modify the `font-family` property to change the font of the aggregate root element.
+In this example, the `.e-gridfooter` class represents the root element of the aggregate row in the DataGrid footer. Modify the `font-family` property to change the font of the aggregate root element.
-**Customizing the Detail Grid Aggregate Cell Elements**
+**Customizing the Detail DataGrid Aggregate Cell Elements**
-To customize the appearance of the detail Grid's aggregate cell elements (summary row cell elements), use the following CSS code:
+To customize the appearance of the detail DataGrid's aggregate cell elements (summary row cell elements), use the following CSS code:
```css
.e-detailcell .e-grid .e-summaryrow .e-summarycell {
@@ -2237,24 +2239,24 @@ In this example, the `.e-summaryrow` class represents the summary row containing
### Selection
-Customize selection styles in the detail grid using CSS. The following examples style row selection, cell selection, and column selection backgrounds.
+Customize selection styles in the detail DataGrid using CSS. The following examples style row selection, cell selection, and column selection backgrounds.
-**Customizing the Detail Grid Row Selection Background**
+**Customizing the Detail DataGrid Row Selection Background**
-To customize the appearance of the detail Grid's row selection, use the following CSS code:
+To customize the appearance of the detail DataGrid's row selection, use the following CSS code:
```css
.e-detailcell .e-grid td.e-selectionbackground {
background-color: #00b7ea;
}
```
-In this example, the `.e-selectionbackground` class targets the background color of the selected rows in the detail Grid. Modify the `background-color` property to change the appearance of the selected row background.
+In this example, the `.e-selectionbackground` class targets the background color of the selected rows in the detail DataGrid. Modify the `background-color` property to change the appearance of the selected row background.
-**Customizing the Detail Grid Cell Selection Background**
+**Customizing the Detail DataGrid Cell Selection Background**
-To customize the appearance of the detail Grid's cell selection, use the following CSS code:
+To customize the appearance of the detail DataGrid's cell selection, use the following CSS code:
```css
.e-detailcell .e-grid td.e-cellselectionbackground {
@@ -2270,11 +2272,11 @@ In this example, the `.e-cellselectionbackground` class targets the background c
Detail template is not supported with the following features:
-* Immutable mode
-* Infinite scrolling
-* Virtual scrolling
-* Print
-* Row template
-* Lazy load grouping
-* State persistence
-* Row and Column Spanning
\ No newline at end of file
+* Immutable mode.
+* Infinite scrolling.
+* Virtual scrolling.
+* Print.
+* Row template.
+* Lazy load grouping.
+* State persistence.
+* Row and Column Spanning.
\ No newline at end of file
diff --git a/blazor/datagrid/row-drag-and-drop.md b/blazor/datagrid/row-drag-and-drop.md
index 64a2da24ab..1a1d1e472b 100644
--- a/blazor/datagrid/row-drag-and-drop.md
+++ b/blazor/datagrid/row-drag-and-drop.md
@@ -9,16 +9,16 @@ documentation: ug
# Row Drag and Drop in Blazor DataGrid
-The Syncfusion® Blazor DataGrid supports built-in row drag-and-drop functionality. Rows can be reordered within the grid, moved between grids, or dropped into custom components.
+The Syncfusion® Blazor DataGrid provides built-in support for seamless row drag and drop functionality. This feature enables effortless row rearrangement within the DataGrid by dragging and dropping rows to new positions. Additionally, rows can be transferred between DataGrids, as well as dragged and dropped to custom components, providing powerful flexibility for complex data management scenarios.
Enable row drag and drop by setting [AllowRowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowRowDragAndDrop) to true. Configure the drop target using the [TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_TargetID) property in [RowDropSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html).
-> - Row selection must be enabled to perform row drag and drop.
-> - To drag multiple rows, set [GridSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Type) to Multiple.
+> * Selection feature must be enabled in the DataGrid to allow row selection before drag and drop operations.
+> * To drag multiple rows, set [GridSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Type) to `Multiple`.
## Drag and drop within DataGrid
-The drag and drop feature enables reordering of rows within the Syncfusion® 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**.
+The drag and drop feature allows rearranging rows within the Syncfusion® Blazor DataGrid by dragging them using a drag icon. 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" %}
@@ -101,10 +101,11 @@ The drag and drop feature enables reordering of rows within the Syncfusion® Blazor DataGrid supports dragging rows from one DataGrid 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 DataGrids. To specify the target DataGrid, configure the [RowDropSettings.TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_TargetID) property with the target DataGrid's ID.
-The Syncfusion® 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 demonstrates row drag and drop between different DataGrids:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -201,9 +202,9 @@ The Syncfusion® Blazor DataGrid supports dr
## Drag and drop in empty area
-The Syncfusion® Blazor DataGrid supports dropping rows in empty content areas. By default, the `AllowEmptyAreaDrop` setting is enabled, allowing rows to be dropped anywhere within the grid content. Rows dropped in an empty area are appended to the end of the data. This applies to both within-grid and between-grid scenarios.
+The Syncfusion® Blazor DataGrid supports dropping rows in empty content areas. By default, the [AllowEmptyAreaDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_AllowEmptyAreaDrop) setting is enabled, allowing rows to be dropped anywhere within the DataGrid content. Rows dropped in an empty area are appended to the end of the data. This applies to both within-DataGrid and between-DataGrid scenarios.
-To display the drop indicator only when hovering over rows, disable the AllowEmptyAreaDrop property in the RowDropSettings configuration.
+To display the drop indicator only when hovering over rows, disable the `AllowEmptyAreaDrop` property in the `RowDropSettings` configuration.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -285,7 +286,7 @@ public class OrdersDetails
The Syncfusion® 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:
+In the following example, selected DataGrid 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 DataGrid and added to the target:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -670,7 +671,7 @@ public class WrapData
## Drag and drop events
-The Syncfusion® Blazor DataGrid exposes events to customize and track drag-and-drop operations:
+The Syncfusion® Blazor DataGrid provides powerful events that trigger during row drag and drop operations. These events enable customization of drag elements, tracking of drag progress, and execution of actions when rows are dropped on target elements. The following events are available:
- [RowDragStarting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDragStarting) – Triggered when dragging starts.
- [RowDropping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDropping) – Triggered while dragged rows are being dropped on the target; can be canceled.
@@ -788,7 +789,7 @@ public class OrderData
## Limitations
- Multiple rows can be dragged and dropped based on the current selection.
-- 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.
+- A single row can be dragged and dropped within the same DataGrid even if multiple selection is not enabled.
+- Row drag and drop does not have built-in support when combined with sorting, filtering, hierarchy DataGrid, or row template features.
- Row drag and drop with grouping does not support lazy-load grouping.
-- 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.
\ No newline at end of file
+- Dragging and dropping within the same group key is not supported. DataGrid does not allow drag-and-drop for multiple rows that belong to different grouped collections.
\ No newline at end of file
diff --git a/blazor/datagrid/row-spanning.md b/blazor/datagrid/row-spanning.md
index ccd870dc39..5ede2e9f93 100644
--- a/blazor/datagrid/row-spanning.md
+++ b/blazor/datagrid/row-spanning.md
@@ -9,11 +9,11 @@ documentation: ug
# Row Spanning in Blazor DataGrid
-Row spanning in the Syncfusion Blazor DataGrid merges adjacent cells with identical values horizontally across columns within the same row. This feature reduces visual repetition and presents grouped data in a compact, readable format. It is particularly effective in scenarios where multiple columns share the same value, such as repeated product details or status indicators.
+The Syncfusion® Blazor DataGrid provides row spanning capabilities to merge two or more cells in a row into a single cell, reducing information repetition across multiple rows and enhancing readability.
-The functionality is enabled by setting the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) property of the [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) component to **AutoSpanMode.Row**. When activated, the grid evaluates each row and merges neighboring cells containing identical values, resulting in a single, wider cell. The merging process is automatic and declarative, requiring no manual logic or data transformation.
+The functionality is enabled by setting the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) property of the [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) to **AutoSpanMode.Row**. When activated, the DataGrid evaluates each row and merges neighboring cells containing identical values, resulting in a single, wider cell. The merging process is automatic and declarative, requiring no manual logic or data transformation.
-Row spanning is part of the broader **AutoSpanMode** enumeration, which provides multiple options for customizing cell merging behavior in the Syncfusion Blazor DataGrid. The available modes include **None**, **Row**, **Column**, and **HorizontalAndVertical**.
+Row spanning is part of the broader **AutoSpanMode** enumeration, which provides multiple options for customizing cell merging behavior in the DataGrid. The available modes include **None**, **Row**, **Column**, and **HorizontalAndVertical**.
| Enum Value | Description |
|---------|-----|
@@ -24,7 +24,7 @@ Row spanning is part of the broader **AutoSpanMode** enumeration, which provides
## Enable row spanning
-Horizontal cell merging in the Syncfusion Blazor DataGrid is enabled by setting the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) property of the [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) component to **AutoSpanMode.Row**. In this mode, adjacent cells across columns within the same row are automatically merged when they contain identical values. This reduces redundancy and provides a cleaner, more compact presentation of repeated data.
+Horizontal cell merging in the Syncfusion Blazor DataGrid is enabled by setting the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) property of the `SfGrid` to **AutoSpanMode.Row**. In this mode, adjacent cells across columns within the same row are automatically merged when they contain identical values. This reduces redundancy and provides a cleaner, more compact presentation of repeated data.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -468,7 +468,7 @@ public class TelecastData
## Disable spanning for specific column
-Column spanning in Syncfusion Blazor DataGrid can be disabled for a specific column(s) by setting the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) component to **AutoSpanMode.None**. This configuration provides precise control, enabling automatic spanning across the grid while excluding column(s) where merging is not required.
+Column spanning in Syncfusion® Blazor DataGrid, can be disabled for a specific column(s) by setting the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **AutoSpanMode.None**. This configuration provides precise control, enabling automatic spanning across the DataGrid while excluding column(s) where merging is not required.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -910,39 +910,39 @@ public class TelecastData
{% previewsample "https://blazorplayground.syncfusion.com/embed/hXByMVixeXvnPXRS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-The effective spanning behavior in the Syncfusion Blazor DataGrid is determined by the intersection of grid-level and column-level [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) modes. A column can only restrict the spanning directions permitted at the grid level and cannot enable a span direction that has been disabled globally. This ensures consistent behavior across the grid while allowing fine-grained control for individual columns.
+The effective spanning behavior in the DataGrid is determined by the intersection of DataGrid-level and column-level [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) modes. A column can only restrict the spanning directions permitted at the DataGrid level and cannot enable a span direction that has been disabled globally. This ensures consistent behavior across the DataGrid while allowing fine-grained control for individual columns.
**Combination Matrix**
-| Grid AutoSpan | Column AutoSpan | Effective Behavior |
+| DataGrid AutoSpan | Column AutoSpan | Effective Behavior |
|---|---|---|
-| None | None | No spanning. Both grid and column explicitly disable spanning. |
-| None | Row | No spanning. Grid-level **None** overrides column-level **Row**. |
-| None | Column | No spanning. Grid-level **None** overrides column-level **Column**. |
-| None | HorizontalAndVertical | No spanning. Grid-level **None** overrides all spanning modes. |
+| None | None | No spanning. Both DataGrid and column explicitly disable spanning. |
+| None | Row | No spanning. DataGrid-level **None** overrides column-level **Row**. |
+| None | Column | No spanning. DataGrid-level **None** overrides column-level **Column**. |
+| None | HorizontalAndVertical | No spanning. DataGrid-level **None** overrides all spanning modes. |
| Row | None | No spanning. Column explicitly disables spanning. |
-| Row | Row | Row spanning only. Both grid and column enable row spanning. |
-| Row | Column | No spanning. Grid only allows row spanning; column cannot enable column spanning. |
-| Row | HorizontalAndVertical | Row spanning only. Grid only allows row spanning. |
+| Row | Row | Row spanning only. Both DataGrid and column enable row spanning. |
+| Row | Column | No spanning. DataGrid only allows row spanning; column cannot enable column spanning. |
+| Row | HorizontalAndVertical | Row spanning only. DataGrid only allows row spanning. |
| Column | None | No spanning. Column explicitly disables spanning. |
-| Column | Row | No spanning. Grid only allows column spanning; column cannot enable row spanning. |
-| Column | Column | Column spanning only. Both grid and column enable column spanning. |
-| Column | HorizontalAndVertical | Column spanning only. Grid only allows column spanning. |
+| Column | Row | No spanning. DataGrid only allows column spanning; column cannot enable row spanning. |
+| Column | Column | Column spanning only. Both DataGrid and column enable column spanning. |
+| Column | HorizontalAndVertical | Column spanning only. DataGrid only allows column spanning. |
| HorizontalAndVertical | None | No spanning. Column explicitly disables both directions. |
-| HorizontalAndVertical | Row | Row spanning only. Grid allows both; column narrows to Row. |
-| HorizontalAndVertical | Column | Column spanning only. Grid allows both; column narrows to Column. |
-| HorizontalAndVertical | HorizontalAndVertical | Row and Column spanning. Both grid and column enable both directions. |
+| HorizontalAndVertical | Row | Row spanning only. DataGrid allows both; column narrows to Row. |
+| HorizontalAndVertical | Column | Column spanning only. DataGrid allows both; column narrows to Column. |
+| HorizontalAndVertical | HorizontalAndVertical | Row and Column spanning. Both DataGrid and column enable both directions. |
---
## Apply row spanning via programmatically
-In addition to automatic cell merging, the Syncfusion Blazor DataGrid provides API support for manually merging cells when custom layout behavior is required. This functionality is available through the [MergeCellsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_MergeCellsAsync_Syncfusion_Blazor_Grids_MergeCellInfo_) method, which enables the definition of rectangular regions of cells to be merged programmatically.
+In addition to automatic cell merging, the Syncfusion Blazor DataGrid provides API support for manually merging cells when custom layout behavior is required. This functionality is available through the `MergeCellsAsync` method, which enables the definition of rectangular regions of cells to be merged programmatically.
Use [MergeCellsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_MergeCellsAsync_Syncfusion_Blazor_Grids_MergeCellInfo_) method to manually merge cells by defining rectangular regions. This method supports both single and batch merging, allowing precise control over layout customization when automatic spanning is insufficient.
-The [MergeCellsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_MergeCellsAsync_Syncfusion_Blazor_Grids_MergeCellInfo_) method is overloaded, meaning multiple versions of the same method name exist, but each accepts different parameter types to handle different use cases. This approach provides flexibility while maintaining a consistent API design.
+The `MergeCellsAsync` method is overloaded, meaning multiple versions of the same method name exist, but each accepts different parameter types to handle different use cases. This approach provides flexibility while maintaining a consistent API design.
| Parameter | Type | Description |
|-----------|------|-------------|
@@ -1425,9 +1425,9 @@ public class TelecastData
## Clear spanning via programmatically
-The Syncfusion Blazor DataGrid provides API support to manually remove merged regions when restoration of individual cells is required. This functionality is achieved using the [UnmergeCellsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UnmergeCellsAsync_Syncfusion_Blazor_Grids_UnmergeCellInfo_) methods, which allow specific merged areas to be unmerged programmatically. For scenarios where all merged regions in the current view need to be reset, the [UnmergeAllAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UnmergeCellsAsync_Syncfusion_Blazor_Grids_UnmergeCellInfo_) method can be used to restore every cell to its original state.
+The Syncfusion® Blazor DataGrid provides API support to manually remove merged regions when restoration of individual cells is required. This functionality is achieved using the `UnmergeCellsAsync` methods, which allow specific merged areas to be unmerged programmatically. For scenarios where all merged regions in the current view need to be reset, the `UnmergeAllAsync` method can be used to restore every cell to its original state.
-The [UnmergeCellsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UnmergeCellsAsync_Syncfusion_Blazor_Grids_UnmergeCellInfo_) method is overloaded to provide flexibility for different scenarios. Both overloads share the same method name but accept different parameter types, allowing removal of either a single merged region or multiple merged regions in one operation.
+The `UnmergeCellsAsync` method is overloaded to provide flexibility for different scenarios. Both overloads share the same method name but accept different parameter types, allowing removal of either a single merged region or multiple merged regions in one operation.
| Method | Parameter | Type | Description |
|--------|-----------|------|-------------|
@@ -1940,5 +1940,5 @@ public class TelecastData
The row spanning is not compatible with the following features:
1. Autofill.
-2. Grouping - Row and column spanning are supported only within the same caption row during grouping scenarios. This means cells can be merged horizontally or vertically only inside a single group header (caption row). Merging across different caption rows is not supported, since each caption row represents a distinct group context. Allowing spans between these rows would break the logical grouping structure and the visual hierarchy of the grid.
-3. Frozen Grid - When the [Freeze](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Freeze) property is set to [FreezeDirection.Fixed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FreezeDirection.html), the concerned column will not be included for row spanning.
+2. Grouping - Row and column spanning are supported only within the same caption row during grouping scenarios. This means cells can be merged horizontally or vertically only inside a single group header (caption row). Merging across different caption rows is not supported, since each caption row represents a distinct group context. Allowing spans between these rows would break the logical grouping structure and the visual hierarchy of the DataGrid.
+3. Frozen DataGrid - When the [Freeze](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Freeze) property is set to [FreezeDirection.Fixed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FreezeDirection.html), the concerned column will not be included for row spanning.
diff --git a/blazor/datagrid/row-template.md b/blazor/datagrid/row-template.md
index dfc897e608..4b9d78bc28 100644
--- a/blazor/datagrid/row-template.md
+++ b/blazor/datagrid/row-template.md
@@ -9,15 +9,17 @@ documentation: ug
# Row Template in Blazor DataGrid
-The [RowTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_RowTemplate) feature in the Syncfusion® Blazor DataGrid enables complete control over the appearance and layout of each row. It is useful for displaying rich, composite content—such as images, buttons, and interactive controls—instead of plain text.
+The row template feature in Syncfusion® Blazor DataGrid allows customization of the appearance and layout of rows. This feature displays custom content such as images, buttons, or other controls within the rows.
-To enable and configure the `RowTemplate` feature in the Grid, follow these steps:
+Enable the row template feature by setting the [RowTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_RowTemplate) property of the DataGrid. This property accepts a custom HTML template that defines the layout for each row.
+
+To enable and configure the `RowTemplate` feature in the DataGrid, follow these steps:
1. **Set up the row template:** Define a custom row layout using the `RowTemplate`.
-2. **Define row layout using the GridTemplates component:** Wrap the `RowTemplate` content inside [GridTemplates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates). Each row template must contain the same number of `| ` elements as the Grid’s column count to ensure alignment.
+2. **Define row layout using the GridTemplates:** Wrap the `RowTemplate` content inside [GridTemplates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates). Each row template must contain the same number of ` | ` elements as the DataGrid’s column count to ensure alignment.
3. **Template configuration:** For more guidance on configuring templates, see the [templates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates) documentation.
-For an overview of `row templates` in the Grid, watch the following video.
+For an overview of `row templates` in the DataGrid, watch the following video.
{% youtube "youtube:https://www.youtube.com/watch?v=Dft0kerEGUQ" %}
@@ -191,10 +193,12 @@ public class EmployeeData
## Row template with formatting
-Typically, the Syncfusion® Blazor DataGrid columns are formatted using [Columns.Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format). When using row templates, values rendered inside the template are not affected by `Columns.Format`.
+By default, Syncfusion® Blazor DataGrid provides the [Columns.Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format) property to format the values displayed in each column. When the [RowTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_RowTemplate) feature is used, customized formatting can be applied directly within the template.
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 demonstrates defining a global formatting function for a date column and use it inside a `RowTemplate`:
+
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -375,13 +379,13 @@ public class EmployeeData
-## Render Syncfusion® control in row template
+## Render Syncfusion® controls in row template
-The Syncfusion® Blazor DataGrid can render Syncfusion® components inside row templates, enabling interactive UI elements within rows.
+The DataGrid renders custom Syncfusion® controls within the rows of the DataGrid. This feature enables interactive Syncfusion® controls to display instead of field values in the DataGrid.
-To render a Syncfusion® control in a row template, set the `RowTemplate` property and provide the custom HTML that defines the row layout.
+Render a Syncfusion® control in a row template by setting the [RowTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_RowTemplate) property of the DataGrid. This property accepts a custom HTML template that defines the layout for each row.
-The following example renders a [Chip](https://blazor.syncfusion.com/documentation/chip/getting-started-with-web-app) for `OrderID`, a [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) for `Quantity`, a [DatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started) for `OrderDate`, and a [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started) for `OrderStatus` in a row template:
+The following example renders a [SfChip](https://blazor.syncfusion.com/documentation/chip/getting-started-with-web-app) for `OrderID`, a [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) for `Quantity`, a [SfDatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started) for `OrderDate`, and a [SfDropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started) for `OrderStatus` in a row template:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -508,11 +512,11 @@ public class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhTMsZwzXeNByOG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Render Syncfusion® Chart in row template
+## Render Syncfusion® Blazor Chart in row template
-The Syncfusion® Blazor DataGrid supports embedding other Syncfusion® components, such as Charts, in row templates to visualize data directly within rows.
+The Syncfusion® Blazor DataGrid provides flexibility to include custom controls such as Chart within the rows of the DataGrid. This feature enhances DataGrid interactivity by displaying graphical representations of data instead of plain text.
-To render a Syncfusion® 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.
+Render a Syncfusion® Chart within a row template of the DataGrid by utilizing the [RowTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_RowTemplate) property. This property accepts a custom HTML template that specifies the layout for each row, enabling rich data visualization.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -626,27 +630,27 @@ To render a Syncfusion® Blazor Chart in a r
## Limitations
-The row template feature is not compatible with all Grid features and has limited interoperability. The features that are incompatible with row templates are listed below.
-
-- Filtering
-- Paging
-- Sorting
-- Searching
-- Rtl
-- Export
-- Context Menu
-- State Persistence
-- Selection
-- Grouping
-- Editing
-- Frozen rows & columns
-- Virtual & Infinite scrolling
-- Column chooser
-- Column menu
-- Detail Row
-- Foreign key column
-- Resizing
-- Reordering
-- Aggregates
-- Clipboard
-- Adaptive view
\ No newline at end of file
+The row template feature offers focused functionality, working seamlessly with a curated set of DataGrid features. The features listed below are not part of its supported set of features:
+
+- Filtering.
+- Paging.
+- Sorting.
+- Searching.
+- Rtl.
+- Export.
+- Context Menu.
+- State Persistence.
+- Selection.
+- Grouping.
+- Editing.
+- Frozen rows & columns.
+- Virtual & Infinite scrolling.
+- Column chooser.
+- Column menu.
+- Detail Row.
+- Foreign key column.
+- Resizing.
+- Reordering.
+- Aggregates.
+- Clipboard.
+- Adaptive view.
\ No newline at end of file
diff --git a/blazor/datagrid/row.md b/blazor/datagrid/row.md
index 12663e5543..0265496788 100644
--- a/blazor/datagrid/row.md
+++ b/blazor/datagrid/row.md
@@ -8,17 +8,17 @@ documentation: ug
# Row in Blazor DataGrid
-Each row represents a single record from a data source and displays values for the fields of that record in a tabular format. Rows in the Syncfusion® Blazor DataGrid support interaction such as selection, editing, sorting, filtering, and event-driven behaviors.
+Each row typically represents a single record or item from a data source. Rows in a DataGrid are used to present data in a tabular format. Each row displays a set of values representing the fields of an individual data record. Rows allow interaction with the data in the DataGrid. Rows can be selected, edited, sorted, filtered, and configured to trigger events based on actions.
-## Customize row styles
+## Styling rows
-Customizing row styles helps emphasize important data, align with application themes, and improve readability. The Syncfusion® Blazor DataGrid supports styling through CSS, properties, methods, and events.
+Customizing the styles of rows in a Syncfusion® Blazor DataGrid allows modification of row appearance to meet specific design requirements. This feature is useful when highlighting certain rows or changing the font style, background color, and other properties of the row to enhance the visual appeal of the DataGrid. To customize the row styles in the DataGrid, the Syncfusion® Blazor DataGrid provides CSS, properties, methods, and event support.
### Using event
-Customize row appearance using the [RowDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDataBound) event, which triggers for each row when it is bound to data. The [RowDataBoundEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.RowDataBoundEventArgs-1.html) provides access to row details for applying custom classes, adding elements, or other styling.
+The [RowDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDataBound) event triggers for every row when it is bound to the data source. In the event handler, the [RowDataBoundEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.RowDataBoundEventArgs-1.html) object contains details of the row. This object can be used to modify the row's appearance, add custom elements, or perform other customizations.
-The following example applies CSS classes to rows based on the value of the `Freight` column. Define the CSS classes `below-30`, `below-80`, and `above-80` in the stylesheet to apply the corresponding styles:
+Here's an example of customizing the row styles based on the value of the **"Freight"** column using the `RowDataBound` event. This example involves checking the value of the **"Freight"** column for each row and adding a CSS class to the row based on the value. The CSS classes "below-30", "below-80", and "above-80" can be defined in the stylesheet to apply the desired styles to the rows.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -64,19 +64,7 @@ The following example applies CSS classes to rows based on the value of the `Fre
{
args.Row.AddClass(new string[] { "below-80" });
}
- else
- {
- args.Row.AddClass(new string[] { "above-80" });
- }
- }
-}
-
-{% endhighlight %}
-
-{% highlight c# tabtitle="OrderData.cs" %}
-public class OrderData
-{
public static List Orders = new List();
public OrderData() { }
@@ -123,15 +111,15 @@ public class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLpWjrbKtniHxws?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> The [QueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_QueryCellInfo) event customizes individual cells and triggers for every cell. Use it when styling is required at the cell level based on conditions.
+> The [QueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_QueryCellInfo) event can also be used to customize cells and is triggered for every cell in the DataGrid. Use it when styling is required at the cell level based on conditions.
### Using CSS
-Apply styles to rows using CSS selectors. Each row element exposes class names that can be targeted for customization.
+Row styles can be applied using CSS selectors. The DataGrid provides a class name for each row element, which can be used to apply styles to that specific row.
**Customize alternate rows**
-Alternate rows can be styled to enhance readability. The Grid applies the CSS class `.e-altrow` to alternate rows. Override this class to apply custom styles.
+The appearance of alternate rows can be customized using CSS. This can be useful for improving the readability of the data and making it easier to distinguish between rows. By default, DataGrid provides the CSS class `.e-altrow` to style the alternate rows. This default style can be customized by overriding the `.e-altrow` class with custom CSS styles.
To change the background color of alternate rows, add the following CSS:
@@ -218,7 +206,7 @@ public class OrderData
**Customize selected row**
-Customize the selected row using CSS to clearly highlight the active selection. Override the default `.e-selectionbackground` class to apply custom styles.
+The appearance of the selected row can be customized using CSS. This is useful when highlighting the currently selected row to improve the visual appeal of the DataGrid. By default, the DataGrid provides the CSS class `.e-selectionbackground` to style the selected row. This default style can be customized by overriding the `.e-selectionbackground` class with custom CSS styles.
To change the background color of the selected row, add the following CSS:
@@ -312,7 +300,9 @@ public class OrderData
## Row height
-The Syncfusion® 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 DataGrid allows customization of the height of rows based on needs. This feature is useful when displaying more content in a row or when reducing the height of rows to fit content. This can be achieved by using the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowHeight) property of the DataGrid. This property allows changing the height of the entire DataGrid row to a desired value.
+
+The following example demonstrates dynamically changing the height of the rows using the `RowHeight` property.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -412,13 +402,15 @@ public class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBJWDgtqYsIJUYQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> The `RowHeight` property sets the height for all Grid rows. It does not configure individual cell heights.
+> The `RowHeight` property sets the height for all DataGrid rows. It does not configure individual cell heights.
> The `RowHeight` setting applies to header and footer rows as well.
-> Row height for a specific row can be customized by adding a row-level CSS class in the [RowDataBound](https://blazor.syncfusion.com/documentation/datagrid/events#rowdatabound) event.
+> Row height for a specific row can be customized by adding a row-level CSS class in the `RowDataBound` event.
### Customize row height for particular row
-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.
+The row height for a particular row can be customized when displaying more content in a particular row, reducing the height of a row to fit content, or making a specific row stand out from the other rows in the DataGrid. This can be achieved by using the `RowHeight` property of the DataGrid along with the [RowDataBound](https://blazor.syncfusion.com/documentation/datagrid/events#rowdatabound) event. This event triggers every time a request is made to access row information, element, or data, and before the row element is appended to the DataGrid element.
+
+In the following example, the row height for the row with **“OrderID”** as **“10249”** is set as **‘90px’** using the `RowDataBound` event.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -515,9 +507,11 @@ public class OrderData
## Row hover
-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.
+The Row Hover feature in DataGrid provides a visual effect when the mouse pointer hovers over the rows, making it easy to highlight and identify the selected row. This feature can also improve the readability of data in the DataGrid. The row hover effect can be enabled or disabled using the [EnableHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableHover) property of the DataGrid.
+
+By default, the `EnableHover` property is set to `true`, which means that the row hovering effect is enabled. To disable the row hover effect, set the `EnableHover` property to `false`.
-By default, `EnableHover` is **true**. Set it to **false** to disable row hover.
+Here is an example that demonstrates enabling or disabling the Row hover feature:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -604,15 +598,17 @@ By default, `EnableHover` is **true**. Set it to **false** to disable row hover.
{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhpiDUZpjrcFKJP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> The `EnableHover` property applies to the entire Grid rather than to specific rows or columns.
+> The `EnableHover` property applies to the entire DataGrid rather than to specific rows or columns.
## Row pinning (Frozen)
-The Syncfusion® 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.
+The Syncfusion® Blazor DataGrid allows freezing rows to keep them visible while scrolling vertically through large datasets. This feature enhances the experience by maintaining important information within view at all times.
{% youtube "youtube:https://www.youtube.com/watch?v=L2NvKyBomhM"%}
-In the following example, the [FrozenRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenRows) property is set to `2`. The top two rows remain fixed while the rest of the Grid scrolls vertically:
+The [FrozenRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenRows) property in the Blazor DataGrid is used to freeze a specified number of rows at the top of the DataGrid, keeping them fixed while the rest of the content scrolls vertically.
+
+In the following example, the `FrozenRows` property is set to `2`. This configuration freezes the top two rows of the DataGrid, and they will remain fixed in their positions while the rest of the DataGrid can be scrolled vertically.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -718,22 +714,23 @@ public class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrTMjUtTMnyFhpX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> Frozen rows should remain within the Grid viewport.
-> Frozen Grid supports row virtualization to improve performance with large datasets.
+> Frozen rows should remain within the DataGrid viewport.
+> Frozen DataGrid supports row virtualization to improve datasets.
> The frozen feature applies to rows visible in the current view.
-> [FrozenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenColumns) and [FrozenRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenRows) can be used together in the same Grid.
+> [FrozenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenColumns) and [FrozenRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenRows) can be used together in the same DataGrid.
### Change default frozen rows line color
-The frozen row background color in the Syncfusion® Blazor DataGrid can be customized by applying CSS styles, allowing alignment with the application's theme.
+The frozen line background color of frozen rows in the DataGrid can be customized by applying custom CSS styles to the specific frozen row. This allows changing the background color of frozen rows to match the application's design and theme.
-Apply the following CSS to change the default line color:
+To change the default frozen rows line color, use the following CSS class:
```css
.e-grid .e-frozenrow-border {
background-color: rgb(5, 114, 47);
}
```
+By applying this CSS class, the background color of frozen rows can be set to the specified RGB color. The following example demonstrates changing the default frozen‑rows line color using CSS.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -830,17 +827,18 @@ public class OrderData
### Limitations
-Frozen row is not compatible with the Autofill feature.
+The Autofill feature is not compatible with frozen rows.
-## Adding a new row programmatically
+## Add a new row programmatically
-The Syncfusion® Blazor DataGrid supports programmatically adding new rows using the [AddRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AddRecordAsync__0_System_Nullable_System_Int32__) method. This is useful when inserting records without manual entry through the UI.
+The Syncfusion® Blazor DataGrid provides a way to add a new row to the DataGrid programmatically. This feature is useful when adding a new record to the DataGrid without manually entering data. This can be done using the [AddRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AddRecordAsync__0_System_Nullable_System_Int32__) method of the DataGrid.
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.
+Here’s an example that demonstrates adding a new row using the `AddRecordAsync` method.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -976,9 +974,9 @@ public class OrderData
> To insert a new record at the beginning, pass 0 as the second parameter to `AddRecordAsync`.
> If no index is specified, the new row is added at the end.
-## How to get the row data and element
+## Get the row data and element
-The Syncfusion® Blazor DataGrid exposes methods to retrieve row data and elements for custom operations.
+DataGrid provides several methods to retrieve row data and elements. This feature is useful when needing to access specific rows, perform custom operations, or manipulate the data displayed in the DataGrid.
1. [GetRowIndexByPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetRowIndexByPrimaryKeyAsync_System_Object_): Retrieves the row index based on a primary key value or row data.
@@ -996,7 +994,7 @@ The Syncfusion® Blazor DataGrid exposes met
}
```
-2. [GetSelectedRowIndexesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetSelectedRowIndexesAsync): Returns the collection of selected row indexes.
+2. [GetSelectedRowIndexesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetSelectedRowIndexesAsync): This method allows retrieval of the collection of indexes of the selected rows.
```cs
GetSelectedRowIndexes
@@ -1014,9 +1012,9 @@ The Syncfusion® Blazor DataGrid exposes met
## Master Detail DataGrid
-The Syncfusion® Blazor DataGrid can display related details in another Grid using a master-detail layout. Selecting a row in the master Grid loads related records in the detail Grid.
+The Syncfusion® Blazor DataGrid can display related details in another DataGrid using a master-detail layout. Selecting a row in the master DataGrid loads related records in the detail DataGrid.
-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).
+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 DataGrid 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 DataGrid 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).
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
diff --git a/blazor/datagrid/sorting.md b/blazor/datagrid/sorting.md
index 47bf0ca977..436cfaae39 100644
--- a/blazor/datagrid/sorting.md
+++ b/blazor/datagrid/sorting.md
@@ -9,7 +9,7 @@ documentation: ug
# Sorting in Blazor DataGrid
-The Syncfusion® Blazor DataGrid includes a built-in sorting feature that helps organize information within columns. This makes it easier to locate and analyze data efficiently. To turn on sorting, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to **true** in the Grid component.
+The Syncfusion® Blazor DataGrid provides built-in support for sorting data-bound columns in ascending or descending order. To enable sorting in the DataGrid, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to `true`.
Sorting can be applied in two ways:
- **Ascending Order**: Arranges values from smallest to largest (e.g., A to Z or 1 to 100). An upward arrow (↑) appears next to the header.
@@ -19,7 +19,7 @@ Sorting can be applied in two ways:
## Sort via UI
-Interact with column headers to sort data directly. Clicking a column header toggles the sort order between **Ascending** and **Descending**. By default, the first click sorts ascending.
+Sorting a particular column is accomplished by clicking on its column header. Each click on the header toggles the sort order between `Ascending` and `Descending`.
|Action | Result |
@@ -105,7 +105,7 @@ public class OrderData
By default, the Syncfusion® Blazor DataGrid renders without any sorting applied. To arrange records in a desired order right from the initial load, configure initial sorting by setting the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Field) (the column's data field name) and [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Direction) properties (either **SortDirection.Ascending** for smallest to largest or **SortDirection.Descending** for largest to smallest) in the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_Columns) collection of [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html).
-In this configuration, initial sorting is applied to the **OrderID** and **ShipCity** columns using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html).
+In this configuration, initial sorting is applied to the **OrderID** and **ShipCity** columns using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html) with a specified [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Direction).
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -180,18 +180,16 @@ public class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrAiCDLKrKWrRVA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> Initial sorting defined in the `GridSortSettings` of the Columns is applied on first render and overrides any sorting applied through interaction.
+> The initial sorting defined in [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_Columns) of the columns will override any sorting applied through user interaction.
## Multi-column sorting
-The Syncfusion® Blazor DataGrid supports sorting multiple columns simultaneously. To enable this feature, set both [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) and [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowMultiSorting) to **true**.
+The Syncfusion® Blazor DataGrid supports multi-column sorting, allowing multiple columns to be sorted simultaneously. To enable multi-column sorting, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) and the [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowMultiSorting) properties to `true`. This enables sorting of multiple columns by holding the CTRL (or Command on macOS) key and clicking the column headers. This feature is useful for sorting data based on multiple criteria to analyze it in various ways.
-**How Multi-Column Sorting Works**
+To clear multi-column sorting for a particular column, press Shift while clicking the column header.
-When multi-sorting is enabled:
-- Click a column header to apply sorting to that column.
-- Hold Ctrl (or Command on macOS) and click additional column headers to include them in the sort sequence.
-- Press Shift and click a column header to remove it from the multi-column sort configuration.
+> * The `AllowSorting` must be `true` while enabling multi-column sort.
+> * Set `AllowMultiSorting` property as `false` to disable multi-column sorting.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -257,13 +255,13 @@ public class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhAWCDhqqMpzrfL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Disabling sorting for specific column
+## Prevent sorting for particular column
-The Syncfusion® Blazor DataGrid provides the option to disable sorting for individual columns. This is useful for fields where sorting is not meaningful or should be restricted.
+The Syncfusion® Blazor DataGrid provides the ability to prevent sorting for a particular column. This is useful when certain columns should not be included in the sorting process.
-To disable sorting for a specific column, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property of that [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **false**.
+This is achieved by setting the `AllowSorting`property of the particular column to `false`.
-In this configuration, sorting is disabled for the **CustomerID** column.
+The following example demonstrates disabling sorting for **"Customer ID"** column.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -332,7 +330,7 @@ public class OrderData
## Controlling Unsort behavior in Blazor DataGrid
The Syncfusion® Blazor DataGrid provides control over whether a column can return to an unsorted state after sorting. This behavior is managed using the [AllowUnsort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_AllowUnsort) property in [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html).
-When [AllowUnsort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_AllowUnsort) is set to **false**, clicking a sorted column header does not revert the Grid to its original unsorted layout. Instead, the column remains sorted until a different sort action is applied. This ensures a consistent sorting state and prevents accidental removal of sorting.
+When `AllowUnsort` is set to **false**, clicking a sorted column header does not revert the DataGrid to its original unsorted layout. Instead, the column remains sorted until a different sort action is applied. This ensures a consistent sorting state and prevents accidental removal of sorting.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -400,9 +398,9 @@ public class OrderData
## Custom sorting
-The Syncfusion® Blazor DataGrid allows customizing the default sort logic for a column by setting the [SortComparer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnModel.html#Syncfusion_Blazor_Grids_ColumnModel_SortComparer) property of a column. This property accepts an IComparer <object> implementation, which can be created by defining a comparer class that implements the .NET [IComparer<T>](https://learn.microsoft.com/en-us/dotnet/api/system.collections.generic.icomparer-1?view=net-8.0) interface.
+The Syncfusion® Blazor DataGrid supports customizing the default sort action for a column by defining the [SortComparer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnModel.html#Syncfusion_Blazor_Grids_ColumnModel_SortComparer) property. This property accepts an IComparer <object> implementation, which can be created by defining a comparer class that implements the .NET [IComparer<T>](https://learn.microsoft.com/en-us/dotnet/api/system.collections.generic.icomparer-1?view=net-8.0) interface.
-In this configuration, a custom comparer is assigned to the **CustomerID** column:
+The following example demonstrates defining a custom `SortComparer` function for the **"Customer ID"** column:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -490,24 +488,17 @@ public class OrderData
## Touch interaction
-The Syncfusion® Blazor DataGrid supports sorting through touch gestures. On touch-enabled devices, tapping a column header sorts that column. A popup icon
- appears to enable multi-column sorting.
-To sort multiple columns, tap the popup
-, and then tap the desired column headers.
+On touch screen devices, tapping a DataGrid header sorts the selected column and displays a popup  for multi-column sorting. Tapping the popup enables sorting of multiple columns . Additional columns can then be sorted by tapping their headers.
-> Both [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowMultiSorting) and [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) must be true for the popup to appear.
+> The [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowMultiSorting) and [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) properties must be `true` for the popup to display.
-This screenshot illustrates touch-based sorting in the Grid:
+The following screenshot represents a DataGrid touch sorting in the device.
-
+
## Sort foreign key column
-The Syncfusion® Blazor DataGrid supports sorting foreign key columns based on display text. To enable this, configure a [GridForeignColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridForeignColumn-1.html#Syncfusion_Blazor_Grids_GridForeignColumn_1_ForeignDataSource) with the following properties:
-
-- [ForeignDataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridForeignColumn-1.html#Syncfusion_Blazor_Grids_GridForeignColumn_1_ForeignDataSource) - Specifies the data source that contains foreign key values and display text.
-- [ForeignKeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyField) - Defines the key field used for mapping.
-- [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) - Specifies the display text field used for sorting and rendering.
+Sorting based on a foreign key column is enabled by configuring the [ForeignDataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridForeignColumn-1.html#Syncfusion_Blazor_Grids_GridForeignColumn_1_ForeignDataSource), [ForeignKeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyField), and [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) properties.
N>
* **For local data** → Sorting is performed based on the value of the `ForeignKeyValue` property (**display text**).
@@ -612,9 +603,9 @@ public class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrosDBrMaWuSWBG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## How to customize sort icon
+## Customizing sort icon
-The Syncfusion® Blazor DataGrid allows customizing the default sort icons by overriding the **.e-icon-ascending** and **.e-icon-descending** CSS classes. Use the **content** property to define custom icons:
+Sort icon customization in the Syncfusion® Blazor DataGrid is accomplished by overriding the default DataGrid classes `.e-icon-ascending` and `.e-icon-descending` with custom content using CSS. The desired icons or symbols are specified using the `content` property as shown below:
```css
.e-grid .e-icon-ascending::before {
@@ -705,17 +696,17 @@ public class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/BXryiZBieWXbgwvN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Sort via programmatically
+## Sort columns externally
-The Syncfusion® Blazor DataGrid supports sorting operations through built-in methods. These methods allow sorting to be added, removed, or cleared programmatically without relying on the grid’s UI. Sorting actions can be triggered externally—such as via dropdown menus, buttons, or other UI elements—allowing for flexible and dynamic control over data presentation.
+The Syncfusion® Blazor DataGrid provides flexibility in sorting based on external interactions. Columns can be sorted, sort columns removed, and sorting cleared using external button clicks.
### Add sort columns
-The DataGrid provides method overloads for programmatic sorting, offering flexibility based on different use cases. These overloads support sorting a single column, multiple columns, or multiple columns while resetting any previous sort settings.
+The Syncfusion® Blazor DataGrid provides method overloads for programmatic sorting, offering flexibility based on different use cases. These overloads support sorting a single column, multiple columns, or multiple columns while resetting any previous sort settings.
**Sorting a Single Column**
-Use [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnAsync_System_String_Syncfusion_Blazor_Grids_SortDirection_System_Nullable_System_Boolean__) method to sort a single column by specifying its name and sort direction. This method also supports multi-column sorting when enabled in the grid, allowing it to add the new sort condition alongside existing ones.
+Use [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnAsync_System_String_Syncfusion_Blazor_Grids_SortDirection_System_Nullable_System_Boolean__) method to sort a single column by specifying its name and sort direction. This method also supports multi-column sorting when enabled in the DataGrid, allowing it to add the new sort condition alongside existing ones.
| Parameter | Type | Description |
|----------------|-------------------|-----------------------------------------------------------------------------|
@@ -829,7 +820,6 @@ public class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhIijrBrMZftWiI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
**Sort Multiple Columns**
The [SortColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnsAsync_System_Collections_Generic_List_Syncfusion_Blazor_Grids_SortColumn__) method is used to sort multiple columns simultaneously. It accepts a list of [SortColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SortColumn.html#Syncfusion_Blazor_Grids_SortColumn_Field) objects, each specifying the column name and sort direction.
@@ -926,7 +916,7 @@ The [SortColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.G
| columns | List | A collection of sorting instructions. Each `SortColumn` in the list defines a specific column to sort and the direction of sorting (**Ascending** or **Descending**). This allows multiple columns to be sorted at the same time, based on the order they appear in the list. |
| clearPreviousSort | bool | To apply a new sort and remove any existing sort settings, enable the option to clear previous sorting. When this option is set to true, all current sort conditions will be removed before applying the new ones. This ensures that only the specified columns are sorted, rather than combining with any existing sort configuration. |
-In this example, the grid is initially configured to sort the **OrderID** column. By setting the `clearPreviousSort` parameter to true in the `SortColumnsAsync` method, the existing sort on the **OrderID** column is removed before applying the new sort. This ensures that only the newly specified columns are sorted, replacing any previous sort settings.
+In this example, the DataGrid is initially configured to sort the **OrderID** column. By setting the `clearPreviousSort` parameter to true in the `SortColumnsAsync` method, the existing sort on the **OrderID** column is removed before applying the new sort. This ensures that only the newly specified columns are sorted, replacing any previous sort settings.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -1012,17 +1002,18 @@ public class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBeCWtoRymxjAYV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
### Clear sorting
-The Blazor DataGrid component provides flexible options to remove sorting from columns. Sorting can be cleared either for specific column or for all columns at once, depending on the requirement.
+
+The Syncfusion® Blazor DataGrid provides flexible options to remove sorting from columns. Sorting can be cleared either for specific column or for all columns at once, depending on the requirement.
**Clear sorting for specific Column**
-The [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync_System_Collections_Generic_List_System_String__) method removes sorting from specific columns. It accepts a list of column field names and clears their sort settings.
+Sorting is cleared on an external button click using the [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync_System_Collections_Generic_List_System_String__) method provided by the DataGrid. This method clears the sorting applied to all columns in the DataGrid.
| Parameter | Type | Description |
|---------------|-------------------|--------------------------------------------------------------|
| columnNames | List | A list of column field names whose sorting should be removed. |
-In the following example, the grid is initially sorted by **CustomerID** and **ShipName**. A dropdown allows selecting a column name, and clicking the **Remove Sort Column** button removes sorting from the selected column.
+In the following example, the DataGrid is initially sorted by **CustomerID** and **ShipName**. A dropdown allows selecting a column name, and clicking the **Remove Sort Column** button removes sorting from the selected column.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -1137,9 +1128,9 @@ public class OrderData
**Clear sorting for all columns**
-The [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync) method removes sorting from all columns in the grid. This is useful when resetting the grid to its default unsorted state.
+The [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync) method removes sorting from all columns in the grid. This is useful when resetting the DataGrid to its default unsorted state.
-In this example, the grid is initially sorted by **CustomerID** and **ShipName**. Clicking the **Clear Sorting** button removes sorting from all columns.
+In this example, the DataGrid is initially sorted by **CustomerID** and **ShipName**. Clicking the **Clear Sorting** button removes sorting from all columns.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
|