();
{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhpWWCAsuvxiajJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> [View Sample in GitHub.](https://github.com/SyncfusionExamples/blazor-datagrid-set-instance-for-child-component)
+> View a complete sample on GitHub: [Set instance for child component in detail template](https://github.com/SyncfusionExamples/blazor-datagrid-set-instance-for-child-component).
## Hide the expand/collapse icon in parent row when no record in detail DataGrid
-The Syncfusion® Blazor DataGrid allows you to hide the expand/collapse icon in the parent row when there are no records in the detail Grid. However, in certain scenarios, you may want to hide the expand/collapse icon for parent rows that do not have any child records, providing a cleaner and more intuitive interface by eliminating unnecessary icons in empty parent rows.
+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.
-To achieve this, you can use the [RowDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDataBound) event, which is triggered when a row is created in the Grid. In this event, you can check whether the detail Grid has any records by checking the current records's details and the detail Grid's datasource. Based on this condition, you can add a specific class to the row using the `AddClass` method. This allows you to override the default CSS class and hide the expand/collapse icon. Add the custom CSS styles as shown below:
+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:
```css
@@ -1438,8 +1430,6 @@ To achieve this, you can use the [RowDataBound](https://help.syncfusion.com/cr/b
```
-The following example demonstrates how to hide the expand/collapse icon in the row with **EmployeeID** as **1**, which does not have record in detail Grid.
-
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -1575,11 +1565,7 @@ public class OrderData
## Render aggregates in detail DataGrid
-The Aggregates feature in the Syncfusion® Blazor DataGrid allows you to display aggregate values in the footer, group footer, and group caption of the detail Grid. With this feature, you can easily perform calculations on specific columns and show summary information.
-
-Rendering aggregates in a detail Grid involves displaying summary data at the footer or group caption of the Grid. This can be particularly useful in detail Grids where each detail Grid represents detailed data that needs to be summarized.
-
-The following example demonstrates how to render aggregates in a detail Grid to display the sum and maximum values of the **Freight** column.
+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.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -1722,7 +1708,6 @@ public class OrderData
new OrderData { OrderID = 10265, CustomerID = "BLONP", ShipCity = "Strasbourg", ShipName = "Blondel père et fils", EmployeeID = 2, Freight = 55.28 },
new OrderData { OrderID = 10266, CustomerID = "WARTH", ShipCity = "Stavern", ShipName = "Wartian Herkku", EmployeeID = 3, Freight = 25.73 },
new OrderData { OrderID = 10267, CustomerID = "FRANK", ShipCity = "München", ShipName = "Frankenversand", EmployeeID = 4, Freight = 208.58 }
-
};
}
}
@@ -1734,28 +1719,28 @@ public class OrderData
## Customize the detail Blazor DataGrid
-The Syncfusion® Blazor DataGrid offers various ways to customize the detail Grid appearance using both default CSS and custom themes. To access the detail Grid elements, you can use the **.e-detailcell** class selector, which targets the detail Grid.
+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.
### Header
-You can customize the appearance of the header elements in the detail Grid using CSS. Here are examples of how to customize the detail Grid header, header cell, and header cell div element.
+Customize header elements in the detail grid using CSS. The following examples style the header, header cells, and header cell content.
-**Customizing the detail Grid header**
+**Customizing the Detail Grid Header**
-To customize the appearance of the detail Grid header root element, you can use the following CSS code:
+To customize the appearance of the detail grid header root element, use the following CSS:
```css
.e-detailcell .e-grid .e-headercontent{
border: 2px solid green;
}
```
-In this example, the **.e-detailcell** class targets the detail Grid and **.e-headercontent** targets its header root element. You can modify the `border` property to change the style of the header border. This customization allows you to override the thin line between the header and content of the detail Grid.
+In this example, the `.e-detailcell` class targets the detail grid, and `.e-headercontent` targets its header root element. The border property can be modified to change the style of the header border, allowing customization of the dividing line between the header and content areas.
-
+
-**Customizing the detail Grid header cell**
+**Customizing the Detail Grid Header Cell**
-To customize the appearance of the Grid header cell elements, you can use the following CSS code:
+To customize the appearance of header cell elements in the detail grid, use the following CSS:
```css
.e-detailcell .e-grid .e-headercontent .e-headercell{
@@ -1763,13 +1748,13 @@ To customize the appearance of the Grid header cell elements, you can use the fo
background-color: #1ea8bd;
}
```
-In this example, the **.e-headercell** class targets the header cell elements. You can modify the `color` and `background-color` properties to change the text color and background of the detail Grid's header cells.
+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.
-
+
-**Customizing the detail Grid header cell div element**
+**Customizing the Detail Grid Header Cell Div Element**
-To customize the appearance of the detail Grid header cell div element, you can use the following CSS code:
+To customize the appearance of the header cell div element in the detail grid, use the following CSS:
```css
.e-detailcell .e-grid .e-headercelldiv {
@@ -1778,17 +1763,17 @@ To customize the appearance of the detail Grid header cell div element, you can
color: darkblue;
}
```
-In this example, the **.e-headercelldiv** class targets the div element within the header cell of the detail Grid. You can modify the `font-size`, `font-weight`, `color` properties to change the font size, font-weight and color of the header text content.
+In this example, the `.e-headercelldiv` class targets the div element within the header cell of the detail grid. The `font-size`, `font-weight`, and `color` properties control the styling of the header text content.
### Paging
-You can customize the appearance of the paging elements in the detail Grid using CSS. Here are examples of how to customize the pager root element, pager container element, pager navigation elements, pager page numeric link elements, and pager current page numeric element of the detail Grid.
+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.
-**Customizing the detail Grid pager root element**
+**Customizing the Detail Grid Pager Root Element**
-To customize the appearance of the detail Grid pager root element, you can use the following CSS code:
+To customize the appearance of the pager root element in the detail grid, use the following CSS:
```css
.e-detailcell .e-grid .e-gridpager {
@@ -1796,13 +1781,13 @@ To customize the appearance of the detail Grid pager root element, you can use t
background-color: #deecf9;
}
```
-In this example, the **.e-detailcell** class targets the detail Grid and the **.e-gridpager** class targets the pager root element. You can modify the `font-family` to change the font family and `background-color` property to change the background color of the pager.
+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.
-
+
-**Customizing the detail Grid pager container element**
+**Customizing the Detail Grid Pager Container Element**
-To customize the appearance of the detail Grid pager container element, you can use the following CSS code:
+To customize the appearance of the pager container element in the detail grid, use the following CSS:
```css
.e-detailcell .e-grid .e-pagercontainer {
@@ -1810,14 +1795,13 @@ To customize the appearance of the detail Grid pager container element, you can
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. You can modify the `border` and `font-family` property to change the border color and font family of the pager container.
-
-
+
-**Customizing the detail Grid pager navigation elements**
+**Customizing the Detail Grid Pager Navigation Elements**
-To customize the appearance of the detail Grid pager navigation elements, you can use the following CSS code:
+To customize the appearance of the detail Grid pager navigation elements, use the following CSS code:
```css
.e-detailcell .e-grid .e-gridpager .e-prevpagedisabled,
@@ -1832,13 +1816,13 @@ To customize the appearance of the detail Grid pager navigation elements, you ca
}
```
-In this example, the classes **.e-prevpagedisabled, .e-prevpage, .e-nextpage, .e-nextpagedisabled, .e-lastpagedisabled, .e-lastpage, .e-firstpage,** and **.e-firstpagedisabled** target the various pager navigation elements of the detail Grid. You can modify the `background-color` property to change the background color of these elements.
+In this example, the classes `.e-prevpagedisabled`, `.e-prevpage`, `.e-nextpage`, `.e-nextpagedisabled`, `.e-lastpagedisabled`, `.e-lastpage`, `.e-firstpage`, and `.e-firstpagedisabled` target the various pager navigation elements of the detail Grid. Modify the `background-color` property to change the background color of these elements.
-
+
-**Customizing the detail Grid pager page numeric link elements**
+**Customizing the Detail Grid Pager Page Numeric Link Elements**
-To customize the appearance of the detail Grid pager current page numeric link elements, you can use the following CSS code:
+To customize the appearance of the detail Grid pager current page numeric link elements, use the following CSS code:
```css
.e-detailcell .e-grid .e-gridpager .e-numericitem {
@@ -1853,13 +1837,13 @@ To customize the appearance of the detail Grid pager current page numeric link e
}
```
-In this example, the **.e-numericitem** class targets the page numeric link elements. You can modify the `background-color`, `color` properties to change the background color and text color of these elements.
+In this example, the `.e-numericitem` class targets the page numeric link elements. Modify the `background-color` and `color` properties to change the background and text color of these elements.
-
+
-**Customizing the detail Grid pager current page numeric element**
+**Customizing the Detail Grid Pager Current Page Numeric Element**
-To customize the appearance of the detail Grid pager current page numeric element, you can use the following CSS code:
+To customize the appearance of the detail Grid pager current page numeric element, use the following CSS code:
```css
.e-detailcell .e-grid .e-gridpager .e-currentitem {
@@ -1868,17 +1852,17 @@ To customize the appearance of the detail Grid pager current page numeric elemen
}
```
-In this example, the **.e-currentitem** class targets the current page numeric item. You can modify the `background-color` property to change the background color of this element and `color` property to change the text color.
+In this example, the `.e-currentitem` class targets the current page numeric item. Modify the `background-color` property to change the background color of this element and the `color` property to change the text color.
-
+
### Sorting
-You can customize the appearance of the sorting icons and multi sorting icons in the detail Grid using CSS.You can use the available Syncfusion® [icons](https://blazor.syncfusion.com/documentation/appearance/icons#bootstrap-5) based on your theme. Here's how to do it:
+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.
-**Customizing the detail Grid sorting icon**
+**Customizing the Detail Grid Sorting Icon**
-To customize the sorting icon that appears in the detail Grid header when sorting is applied, you can use the following CSS code:
+To customize the sorting icon that appears in the detail Grid header when sorting is applied, use the following CSS code:
```css
.e-detailcell .e-grid .e-icon-ascending::before {
@@ -1891,13 +1875,14 @@ To customize the sorting icon that appears in the detail Grid header when sortin
/* Icon code for descending order */
}
```
-In this example, the **.e-detailcell** class targets the detail Grid and 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 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.
-**Customizing the detail Grid multi sorting icon**
+
-To customize the multi sorting icon that appears in the detail Grid header when multiple columns are sorted, you can use the following CSS code:
+**Customizing the Detail Grid 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:
```css
.e-detailcell .e-grid .e-sortnumber {
@@ -1906,165 +1891,175 @@ To customize the multi sorting icon that appears in the detail Grid header when
}
```
-In this example, the **.e-sortnumber** class targets the background color and font family of the multi sorting icon. You can modify the `background-color` and `font-family` properties to customize the appearance of the multi sorting icon.
+In this example, the `.e-sortnumber` class targets the background color and font family of the multi sorting icon. Modify the `background-color` and `font-family` properties to customize the appearance of the multi sorting icon.
-
+
### Filtering
-You can customize the appearance of filtering elements in the detail Grid using CSS. Below are examples of how to customize various filtering elements, including filter bar cell elements, filter bar input elements, focus styles, clear icons, filter icons, filter dialog content, filter dialog footer, filter dialog input elements, filter dialog button elements, and Excel filter dialog number filters.
+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.
-**Customizing the detail Grid filter bar cell element**
+**Customizing the Detail Grid Filter Bar Cell Element**
-To customize the appearance of the filter bar cell element in the detail Grid header, you can use the following CSS code:
+To customize the appearance of the filter bar cell element in the detail Grid header, use the following CSS code:
```css
.e-detailcell .e-grid .e-filterbar .e-filterbarcell {
background-color: #045fb4;
}
-
```
-In this example, the **.e-detailcell** class targets the detail Grid and the **.e-filterbarcell** class targets the filter bar cell element in the detail Grid header. You can 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 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.
+
+
-**Customizing the detail Grid filter bar input element**
+**Customizing the Detail Grid Filter Bar Input Element**
-To customize the appearance of the filter bar input element in the detail Grid header, you can use the following CSS code:
+To customize the appearance of the filter bar input element in the detail Grid header, use the following CSS code:
```css
.e-detailcell .e-grid .e-filterbarcell .e-input-group input.e-input{
font-family: cursive;
}
```
-In this example, the **.e-filterbarcell** class targets the filter bar cell element, and the **.e-input** class targets the input element within the cell. You can modify the `font-family` property to change the font of the filter bar input element.
-
+In this example, the `.e-filterbarcell` class targets the filter bar cell element, and the `.e-input` class targets the input element within the cell. Modify the `font-family` property to change the font of the filter bar input element.
-**Customizing the detail Grid filter bar input focus**
+
-To customize the appearance of the detail Grid's filter bar input element's focus highlight, you can use the following CSS code:
+**Customizing the Detail Grid Filter Bar Input Focus**
+
+To customize the appearance of the detail Grid'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{
background-color: #deecf9;
}
```
-In this example, the **.e-filterbarcell** class targets the filter bar cell element, and the **.e-input-group.e-input-focus** class targets the focused input element. You can modify the `background-color` property to change the color of the focus highlight.
-
+In this example, the `.e-filterbarcell` class targets the filter bar cell element, and the .e-input-group.`e-input-focus` class targets the focused input element. Modify the `background-color` property to change the color of the focus highlight.
+
+
-**Customizing the detail Grid filter bar input clear icon**
+**Customizing the Detail Grid Filter Bar Input Clear Icon**
-To customize the appearance of the detail Grid's filter bar input element's clear icon, you can use the following CSS code:
+To customize the appearance of the detail Grid'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 {
content: '\e72c';
}
```
-In this example, the **.e-clear-icon** class targets the clear icon element within the input group. You can modify the `content` property to change the icon displayed.
-
+In this example, the `.e-clear-icon` class targets the clear icon element within the input group. Modify the `content` property to change the icon displayed.
+
+
-**Customizing the detail Grid filtering icon**
+**Customizing the Detail Grid Filtering Icon**
-To customize the appearance of the filtering icon in the detail Grid header, you can use the following CSS code:
+To customize the appearance of the filtering icon in the detail Grid header, use the following CSS code:
```css
.e-detailcell .e-grid .e-icon-filter::before{
content: '\e81e';
}
```
-In this example, the **.e-icon-filter** class targets the filtering icon element. You can modify the `content` property to change the icon displayed.
-
+In this example, the `.e-icon-filter` class targets the filtering icon element. Modify the `content` property to change the icon displayed.
-**Customizing the detail Grid filter dialog content**
+
-To customize the appearance of the detail Grid's filter dialog's content element, you can use the following CSS code:
+**Customizing the Detail Grid Filter Dialog Content**
+
+To customize the appearance of the detail Grid's filter dialog content element, use the following CSS code:
```css
.e-detailcell .e-grid .e-filter-popup .e-dlg-content {
background-color: #deecf9;
}
```
-In this example, the **.e-filter-popup .e-dlg-content** classes target the content element within the filter dialog. You can modify the `background-color` property to change the color of the dialog's content.
-
+In this example, the `.e-filter-popup .e-dlg-content` classes target the content element within the filter dialog. Modify the `background-color` property to change the color of the dialog's content.
+
+
-**Customizing the detail Grid filter dialog footer**
+**Customizing the Detail Grid Filter Dialog Footer**
-To customize the appearance of the detail Grid's filter dialog's footer element, you can use the following CSS code:
+To customize the appearance of the detail Grid's filter dialog footer element, use the following CSS code:
```css
.e-detailcell .e-grid .e-filter-popup .e-footer-content {
background-color: #deecf9;
}
```
-In this example, the **.e-filter-popup .e-footer-content** classes target the footer element within the filter dialog. You can modify the `background-color` property to change the color of the dialog's footer.
-
+In this example, the `.e-filter-popup .e-footer-content `classes target the footer element within the filter dialog. Modify the `background-color` property to change the color of the dialog's footer.
+
+
-**Customizing the detail Grid filter dialog input element**
+**Customizing the Detail Grid Filter Dialog Input Element**
-To customize the appearance of the detail Grid's filter dialog's input elements, you can use the following CSS code:
+To customize the appearance of the detail Grid's filter dialog input elements, use the following CSS code:
```css
.e-detailcell .e-grid .e-filter-popup .e-input-group input.e-input{
font-family: cursive;
}
```
-In this example, the **.e-filter-popup** class targets the filter dialog, and the **.e-input** class targets the input elements within the dialog. You can modify the `font-family` property to change the font of the input elements.
-
+In this example, the **.e-filter-popup** class targets the filter dialog, and the **.e-input** class targets the input elements within the dialog. Modify the `font-family` property to change the font of the input elements.
-**Customizing the detail Grid filter dialog button element**
+
-To customize the appearance of the detail Grid's filter dialog's button elements, you can use the following CSS code:
+**Customizing the Detail Grid Filter Dialog Button Element**
+
+To customize the appearance of the detail Grid's filter dialog button elements, use the following CSS code:
```css
.e-detailcell .e-grid .e-filter-popup .e-btn{
font-family: cursive;
}
```
-In this example, the **.e-filter-popup** class targets the filter dialog, and the **.e-btn** class targets the button elements within the dialog. You can modify the `font-family` property to change the font of the button elements.
-
+In this example, the `.e-filter-popup` class targets the filter dialog, and the `.e-btn` class targets the button elements within the dialog. Modify the `font-family` property to change the font of the button elements.
+
+
-**Customizing the detail Grid Excel filter dialog number filters element**
+**Customizing the Detail Grid Excel Filter Dialog Number Filters Element**
-To customize the appearance of the Excel filter dialog's number filters in the detail Grid, you can use the following CSS code:
+To customize the appearance of the Excel filter dialog's number filters in the detail Grid, use the following CSS code:
```css
.e-detailcell .e-grid .e-filter-popup .e-contextmenu {
background-color: #deecf9;
}
```
-In this example, the **.e-filter-popup .e-contextmenu** classes target the number filter elements within the Excel filter dialog. You can modify the `background-color` property to change the color of these elements.
-
+In this example, the `.e-filter-popup .e-contextmenu` classes target the number filter elements within the Excel filter dialog. Modify the `background-color` property to change the color of these elements.
+
+
### Grouping
-You can customize the appearance of grouping elements in the detail Grid using CSS. Here are examples of how to customize the group header, group expand/collapse icons, group caption row, and grouping indent cell.
+Customize grouping elements in the detail grid 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 Grid Group Header**
-To customize the appearance of the detail Grid's group header element, you can use the following CSS code:
+To customize the appearance of the detail Grid's group header element, use the following CSS code:
```css
.e-detailcell .e-grid .e-groupdroparea {
background-color: #132f49;
}
```
-In this example, the **.e-detailcell** class targets the detail Grid and the **.e-groupdroparea** class targets the group header element. You can modify the `background-color` property to change the color of the group header.
-
+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.
-**Customizing the detail Grid group expand or collapse icons**
+
-To customize the appearance of the group expand/collapse icons in the detail Grid, you can use the following CSS code:
+**Customizing the Detail Grid Group Expand or Collapse Icons**
+
+To customize the appearance of the group expand/collapse icons in the detail Grid, use the following CSS code:
```css
.e-detailcell .e-grid .e-icon-gdownarrow::before{
@@ -2075,13 +2070,13 @@ To customize the appearance of the group expand/collapse icons in the detail Gri
}
```
-In this example, the **.e-icon-gdownarrow** and **.e-icon-grightarrow** classes target the expand and collapse icons, respectively. You can modify the `content` property to change the icon displayed. You can use the available [Syncfusion® icons](https://blazor.syncfusion.com/documentation/appearance/icons) based on your theme.
+In this example, the `.e-icon-gdownarrow` and `.e-icon-grightarrow` classes target the expand and collapse icons, respectively. Modify the `content` property to change the icon displayed. [Syncfusion® icons](https://blazor.syncfusion.com/documentation/appearance/icons) sets can be used based on the selected theme.
-
+
-**Customizing the detail Grid group caption row**
+**Customizing the Detail Grid Group Caption Row**
-To customize the appearance of the detail Grid's group caption row and the icons indicating record expansion or collapse, you can use the following CSS code:
+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:
```css
.e-detailcell .e-grid .e-groupcaption {
@@ -2094,13 +2089,13 @@ To customize the appearance of the detail Grid's group caption row and the icons
}
```
-In this example, the **.e-groupcaption** class targets the group caption row element, and the **.e-recordplusexpand** and **.e-recordpluscollapse** classes target the icons indicating record expansion or collapse. You can modify the `background-color` property to change the color of these elements.
+In this example, the `.e-groupcaption` class targets the group caption row element, and the `.e-recordplusexpand` and `.e-recordpluscollapse` classes target the icons indicating record expansion or collapse. Modify the `background-color` property to change the color of these elements.
-
+
-**Customizing the detail Grid grouping indent cell**
+**Customizing the Detail Grid Grouping Indent Cell**
-To customize the appearance of the detail Grid's grouping indent cell element, you can use the following CSS code:
+To customize the appearance of the detail Grid's grouping indent cell element, use the following CSS code:
```css
.e-detailcell .e-grid .e-indentcell {
@@ -2108,17 +2103,17 @@ To customize the appearance of the detail Grid's grouping indent cell element, y
}
```
-In this example, the **.e-indentcell** class targets the grouping indent cell element. You can modify the `background-color` property to change the color of the indent cell.
+In this example, the **.e-indentcell** class targets the grouping indent cell element. Modify the `background-color` property to change the color of the indent cell.
-
+
### Toolbar
-You can customize the appearance of the toolbar in the detail Grid using CSS. Here are examples of how to customize the toolbar root element and toolbar button element.
+Customize the toolbar appearance in the detail grid using CSS. The following examples style the toolbar root and button elements.
-**Customizing the detail Grid toolbar root element**
+**Customizing the Detail Grid toolbar Root Element**
-To customize the appearance of the detail Grid's toolbar root element, you can use the following CSS code:
+To customize the appearance of the detail Grid's toolbar root element, use the following CSS code:
```css
.e-detailcell .e-grid .e-toolbar-items {
@@ -2126,13 +2121,13 @@ To customize the appearance of the detail Grid's toolbar root element, you can u
}
```
-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. You can modify the `background-color` property to change the background color of the toolbar.
+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.
-
+
-**Customizing the detail Grid toolbar button element**
+**Customizing the Detail Grid Toolbar Button Element**
-To customize the appearance of the detail Grid's toolbar buttons, you can use the following CSS code:
+To customize the appearance of the detail Grid's toolbar buttons, use the following CSS code:
```css
.e-detailcell .e-grid .e-toolbar .e-btn {
@@ -2140,17 +2135,17 @@ To customize the appearance of the detail Grid's toolbar buttons, you can use th
}
```
-In this example, the **.e-toolbar .e-btn** selector targets the background color of the toolbar button elements. You can modify the `background-color` property to change the background color of the toolbar buttons.
+In this example, the `.e-toolbar .e-btn` selector targets the background color of the toolbar button elements. Modify the `background-color` property to change the background color of the toolbar buttons.
-
+
### Editing
-You can customize the appearance of editing-related elements in the detail Grid using CSS. Below are examples of how to customize various editing-related elements.
+Customize editing-related elements in the detail grid 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 Grid Edited and Added Row Element**
-To customize the appearance of edited and added row table elements in the detail Grid, you can use the following CSS code:
+To customize the appearance of edited and added row table elements in the detail Grid, use the following CSS code:
```css
.e-detailcell .e-grid .e-editedrow table,
@@ -2158,14 +2153,14 @@ To customize the appearance of edited and added row table elements in the detail
background-color: #62b2eb;
}
```
-In this example, the **.e-detailcell** class targets the detail Grid and the .**e-editedrow** class represents the edited row element, and the **.e-addedrow** class represents the added row element. You can modify the `background-color` property to change the color of these row table elements.
+In this example, the `.e-editedrow` class represents the edited row element, and the `.e-addedrow` class represents the added row element. Modify the `background-color` property to change the color of these row table elements.
-
-
+
+
-**Customizing the detail Grid edited row input element**
+**Customizing the Detail Grid Edited Row Input Element**
-To customize the appearance of edited row input elements in the detail Grid, you can use the following CSS code:
+To customize the appearance of edited row input elements in the detail Grid, use the following CSS code:
```css
.e-detailcell .e-grid .e-editedrow .e-input-group input.e-input{
@@ -2173,26 +2168,26 @@ To customize the appearance of edited row input elements in the detail Grid, you
color:rgb(214, 33, 123)
}
```
-In this example, the **.e-editedrow** class represents the edited row element, and the **.e-input** class represents the input elements within the form. You can modify the `font-family` property to change the font and `color` property to change text color of the input elements.
+In this example, the `.e-editedrow` class represents the edited row element, and the `.e-input` class targets the input elements within the form. Modify the `font-family` property to change the font and the `color` property to change the text color of the input elements.
-
+
-**Customizing the detail Grid edit dialog header element**
+**Customizing the Detail Grid Edit Dialog Header Element**
-To customize the appearance of the edit dialog header element in the detail Grid, you can use the following CSS code:
+To customize the appearance of the edit dialog header element in the detail Grid, use the following CSS code:
```css
.e-edit-dialog .e-dlg-header-content {
background-color: #deecf9;
}
```
-In this example, the **.e-edit-dialog** class represents the edit dialog, and the **.e-dlg-header-content** class targets the header content within the dialog. You can modify the `background-color` property to change the color of the header element.
+In this example, the `.e-edit-dialog` class represents the edit dialog, and the `.e-dlg-header-content` class targets the header content within the dialog. Modify the `background-color` property to change the color of the header element.
-
+
-**Customizing the detail Grid command column buttons**
+**Customizing the Detail Grid Command Column Buttons**
-To customize the appearance of the detail Grid's command column buttons such as edit, delete, update, and cancel, you can use the following CSS code:
+To customize the appearance of the detail Grid'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{
@@ -2202,18 +2197,19 @@ To customize the appearance of the detail Grid's command column buttons such as
color: #077005;
}
```
-In this example, the **.e-edit, .e-delete, .e-update, and .e-cancel-icon** classes represent the respective command column buttons. You can modify the `color` property to change the color of these buttons.
+In this example, the `.e-edit`, `.e-delete`, `.e-update`, and `.e-cancel-icon` classes represent the respective command column buttons. Modify the `color` property to change the color of these buttons.
-
-
+
+
### Aggregate
-You can customize the appearance of aggregate elements in the detail Grid using CSS. Below are examples of how to customize the aggregate root element and the aggregate cell elements.
+Customize aggregate elements in the detail grid using CSS. The following examples style the aggregate root and aggregate cells.
+
+**Customizing the Detail Grid Aggregate Root Element**
-**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 Grid's aggregate root elements, you can use the following CSS code:
```css
.e-detailcell .e-grid .e-gridfooter {
@@ -2221,13 +2217,13 @@ To customize the appearance of the detail Grid's aggregate root elements, you ca
}
```
-In this example, the **.e-detailcell** class targets the detail Grid and the **e-gridfooter** class represents the root element of the aggregate row in the grid footer. You can 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 grid 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 Grid Aggregate Cell Elements**
-To customize the appearance of the detail Grid's aggregate cell elements (summary row cell elements), you can use the following CSS code:
+To customize the appearance of the detail Grid's aggregate cell elements (summary row cell elements), use the following CSS code:
```css
.e-detailcell .e-grid .e-summaryrow .e-summarycell {
@@ -2235,30 +2231,30 @@ To customize the appearance of the detail Grid's aggregate cell elements (summar
}
```
-In this example, the **e-summaryrow** class represents the summary row containing aggregate cells, and the **e-summarycell** class targets individual aggregate cells within the summary row. You can modify the `background-color` property to change the `color` of the aggregate cell elements.
+In this example, the `.e-summaryrow` class represents the summary row containing aggregate cells, and the `.e-summarycell` class targets individual aggregate cells within the summary row. Modify the `background-color` property to change the color of the aggregate cell elements.
-
+
### Selection
-You can customize the appearance of the selection in the detail Grid using CSS. Here are examples of how to customize the row selection background, cell selection background, and column selection background.
+Customize selection styles in the detail grid using CSS. The following examples style row selection, cell selection, and column selection backgrounds.
-**Customizing the detail Grid row selection background**
+**Customizing the Detail Grid Row Selection Background**
-To customize the appearance of the detail Grid's row selection, you can use the following CSS code:
+To customize the appearance of the detail Grid's row selection, use the following CSS code:
```css
.e-detailcell .e-grid td.e-selectionbackground {
background-color: #00b7ea;
}
```
-In this example, the **.e-detailcell** class targets the detail Grid and the **.e-selectionbackground** class targets the background color of the row selection. You can modify the `background-color` property to change the background color of the selected rows.
+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.
-
+
-**Customizing the detail Grid cell selection background**
+**Customizing the Detail Grid Cell Selection Background**
-To customize the appearance of the detail Grid's cell selection, you can use the following CSS code:
+To customize the appearance of the detail Grid's cell selection, use the following CSS code:
```css
.e-detailcell .e-grid td.e-cellselectionbackground {
@@ -2266,21 +2262,19 @@ To customize the appearance of the detail Grid's cell selection, you can use the
}
```
-In this example, the **.e-cellselectionbackground** class targets the background color of the cell selection. You can modify the `background-color` property to change the background color of the selected cells.
+In this example, the `.e-cellselectionbackground` class targets the background color of the selected cells. Modify the `background-color` property to change the appearance of the selected cell background.
-
+
## Limitations
Detail template is not supported with the following features:
-* Frozen rows and columns
* Immutable mode
* Infinite scrolling
* Virtual scrolling
* Print
* Row template
-* Row spanning
-* Column spanning
* Lazy load grouping
-* State persistence
\ No newline at end of file
+* 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 d7e346e073..64a2da24ab 100644
--- a/blazor/datagrid/row-drag-and-drop.md
+++ b/blazor/datagrid/row-drag-and-drop.md
@@ -1,7 +1,7 @@
---
layout: post
title: Row Drag and Drop in Blazor DataGrid | Syncfusion
-description: Checkout and learn here all about Row Drag and Drop in Syncfusion Blazor DataGrid and much more details.
+description: Learn how to enable row drag and drop in Syncfusion Blazor DataGrid, including reordering, cross-grid dragging, custom drops, and event handling.
platform: Blazor
control: DataGrid
documentation: ug
@@ -9,18 +9,16 @@ documentation: ug
# Row Drag and Drop in Blazor DataGrid
-The Syncfusion® Blazor DataGrid provides built-in support for row drag and drop functionality. This feature allows you to easily rearrange rows within the Grid by dragging and dropping them to new positions. Additionally, you can also drag and drop rows from one Grid to another Grid, as well as drag and drop rows to custom components.
+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.
-To enable row drag and drop, set the [AllowRowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowRowDragAndDrop) to **true**. The target component where the Grid rows are to be dropped can be set by using the [TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_TargetID).
+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).
-> * Selection feature must be enabled for row drag and drop.
-> * Multiple rows can be selected by clicking and dragging inside the Grid. For multiple row selection, the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Type) property must be set to multiple.
+> - 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.
## Drag and drop within DataGrid
-The drag and drop feature allows you to rearrange rows within the Syncfusion® Blazor DataGrid by dragging them using a drag icon. This feature can be enabled 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**. This property is a boolean value that determines whether row drag and drop is enabled or not. By default, it is set to **false**, which means that row drag and drop is disabled.
-
-Here’s an example of how to enable drag and drop within the Grid:
+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**.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -105,11 +103,8 @@ Here’s an example of how to enable drag and drop within the Grid:
## Drag and drop to DataGrid
-The Syncfusion® Blazor DataGrid row drag and drop allows you to drag Grid rows and drop to another Grid. This feature can be enabled 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** in the Grid. This property specifies whether to enable or disable the row drag and drop feature in the Grid. By default, this property is set to **false**, which means that row drag and drop functionality is not enabled.
-
-To specify the target component where the Grid rows should be dropped, use the [TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_TargetID) property of the [RowDropSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html) object. The `TargetID` property takes the [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ID) of the target component as its value.
-Here’s an example code snippet that demonstrates how to enable Row drag and drop another Grid:
+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.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -206,9 +201,9 @@ Here’s an example code snippet that demonstrates how to enable Row drag and dr
## Drag and drop in empty area
-The Syncfusion® Blazor DataGrid supports drag and drop functionality. By default, the `AllowEmptyAreaDrop` property is enabled, enhancing the user experience by allowing rows to be dropped anywhere within the DataGrid content. Whenever rows are dropped in an empty area, they are placed at the end of the DataGrid. This applies to both within the same Grid and between different DataGrids.
-
-If you prefer to show the drop indicator only when hovering over rows, you can disable the `AllowEmptyAreaDrop` property to achieve this.
+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.
+
+To display the drop indicator only when hovering over rows, disable the AllowEmptyAreaDrop property in the RowDropSettings configuration.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -288,9 +283,9 @@ public class OrdersDetails
## Drag and drop to custom component
-The Syncfusion® Blazor DataGrid provides the feature to drag and drop Grid rows to any custom component. This feature allows you to easily move rows from one component to another without having to manually copy and paste data. To enable row drag and drop, you need to set the [AllowRowDragAndDrop] property to **true** and defining the custom component [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ID) in the [TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_TargetID) property of the [RowDropSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html) object. The `ID` provided in `TargetID` should correspond to the `ID` of the target component where the rows are to be dropped.
+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 below example, the selected Grid row is dragged and dropped in to the [TreeGrid](https://blazor.syncfusion.com/documentation/treegrid/getting-started-webapp) by using [RowDropped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDropped) event. Once the row is dropped into the TreeGrid, removed the corresponding Grid row from Grid and its data inserted in custom 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:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -624,7 +619,7 @@ public class WrapData
Priority = "Low",
Approved = false
}
- }
+ }
},
new WrapData
{
@@ -675,11 +670,11 @@ public class WrapData
## Drag and drop events
-The Syncfusion® Blazor DataGrid provides a set of events that are triggered during drag and drop operations on Grid rows. These events allow you to customize the drag element, track the progress of the dragging operation, and perform actions when a row is dropped on a target element. The following events are available:
+The Syncfusion® Blazor DataGrid exposes events to customize and track drag-and-drop operations:
-* [RowDragStarting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDragStarting) - This event is triggered when the dragging of a Grid row starts.
-* [RowDropping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDropping) - This event triggered when the dragged elements are being dropped on the target element.
-* [RowDropped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDropped) - This event is triggered when a drag element is dropped onto a target element.
+- [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.
+- [RowDropped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDropped) – Triggered after rows are dropped on the target.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -788,12 +783,12 @@ public class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrpWVNeByBihtpL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> For performing row drag and drop action on the Grid, any one of the columns should be defined as a primary key using the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property.
+> To perform row drag and drop, define at least one column as a primary key using the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property.
## Limitations
-* Multiple rows can be drag and drop in the row selections basis.
-* Single row is able to drag and drop in same Grid without enable the row selection.
-* Row drag and drop feature is not having built in support with sorting, filtering, hierarchy Grid and row template features of Grid.
-* The row drag-and-drop feature for grouping currently lacks support for lazy load grouping.
-* Drag and drop within the same group key is not supported. Grid does not support the drag-and-drop functionality for multiple rows originating from different grouped collections.
\ No newline at end of file
+- 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.
+- 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
diff --git a/blazor/datagrid/row-template.md b/blazor/datagrid/row-template.md
index 431bd7d01b..dca9947a39 100644
--- a/blazor/datagrid/row-template.md
+++ b/blazor/datagrid/row-template.md
@@ -9,22 +9,18 @@ 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 allows you to fully customize the appearance and layout of each row. This feature is particularly helpful when you need to display complex content within rows, such as images, buttons, or additional interactive controls, rather than just plain text or simple values.
+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.
-To enable and configure the `RowTemplate` feature in Grid, follow these steps:
+To enable and configure the `RowTemplate` feature in the Grid, follow these steps:
-1. **Set up the RowTemplate:** Use the `RowTemplate` to define custom row layouts.
+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.
+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.
-2. **Define Row Layout using GridTemplates Component:** The `RowTemplate` content must be wrapped within the [GridTemplates](https://blazor.syncfusion.com/documentation/datagrid/templates#gridtemplates-component), with each row template containing the same number of ** | ** elements as the columns defined in the Grid. This ensures alignment across rows.
-
-3. **Template Configuration:** For detailed guidance on configuring templates, review the [templates](https://blazor.syncfusion.com/documentation/datagrid/templates#templates) documentation, which covers essential steps for adding custom templates.
-
-To know about **Row Template** in Grid, you can check this video.
+For an overview of `row templates` in the Grid, watch the following video.
{% youtube "youtube:https://www.youtube.com/watch?v=Dft0kerEGUQ" %}
-The example below shows how to set up a Row Template in Grid to display an employee information with employee photo in the first column and employee details like Name, Address, etc., are presented in the second column for each row.
-
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -195,13 +191,9 @@ public class EmployeeData
## Row template with formatting
-Typically, the Syncfusion® Blazor DataGrid columns can be formatted using the [Columns.Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnModel.html#Syncfusion_Blazor_Grids_ColumnModel_Format) property, which formats values displayed in each column. However, when you use row templates, the `Columns.Format` property does not apply to values displayed within the template.
+Typically, the Syncfusion® Blazor DataGrid columns are formatted using [Columns.Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnModel.html#Syncfusion_Blazor_Grids_ColumnModel_Format). When using row templates, values rendered inside the template are not affected by `Columns.Format`.
-To format values inside a row template, define a global function that applies the desired formatting. This global function can then be called within the row template to format values, such as dates, currency, or custom text layouts, according to your specific requirements.
-
-For example, to format date values within a row template, create a global function that applies a [Custom DateTime](https://docs.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) format to ensure the desired format is displayed consistently in the Grid.
-
-Here is an example of how to define a global formatting function for a date column and use it inside a rowTemplate:
+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.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -385,11 +377,11 @@ public class EmployeeData
## Render Syncfusion® control in row template
-The Syncfusion® Blazor DataGrid allows you to render custom Syncfusion® controls within the rows of the Grid. This feature is helpful as it enables you to display interactive Syncfusion® controls instead of field values in the Grid.
+The Syncfusion® Blazor DataGrid can render Syncfusion® components inside row templates, enabling interactive UI elements within rows.
-To enable a Syncfusion® control in a row template, you need to set the `RowTemplate` property of the Grid. This property accepts a custom HTML template that defines the layout for each row.
+To render a Syncfusion® control in a row template, set the `RowTemplate` property and provide the custom HTML that defines the row layout.
-Here is an example that demonstrates rendering 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** within a row template:
+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:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -518,11 +510,9 @@ public class OrderData
## Render Syncfusion® Chart in row template
-The Syncfusion® Blazor DataGrid provides the flexibility to include custom controls, such as a Chart, within the rows of the Grid. This feature enhances Grid interactivity by allowing graphical representations of data instead of plain text.
-
-To render a Syncfusion® Blazor Chart within a row template of the Grid, use the [RowTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_RowTemplate) property. This property accepts a HTML template that defines the layout for each row, enabling rich data visualization directly inside the Grid.
+The Syncfusion® Blazor DataGrid supports embedding other Syncfusion® components, such as Charts, in row templates to visualize data directly within rows.
-Here is an example that demonstrates rendering Syncfusion® Chart within a row template:
+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.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -636,7 +626,7 @@ Here is an example that demonstrates rendering Syncfusion® Blazor DataGrid are used to present data in a tabular format. Each row displays a set of values the fields of an individual data record. Rows allow users to interact with the data in the Grid. Users can select rows, edit cell values, perform sorting or filtering operations, and trigger events based on actions.
+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.
## Customize row styles
-Customizing the styles of rows in the Syncfusion® Blazor DataGrid allows you to modify the appearance of rows to meet your design requirements. This feature is useful when you want to highlight certain rows or change the font style, background color, and other properties of the row to enhance the visual appeal of the Grid. To customize the row styles in the Grid, you can use CSS, properties, methods, or event support provided by the Grid.
+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.
### Using event
-You can customize the appearance of the rows by using the [RowDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDataBound) event. This event triggers for every row when it is bound to the data source. In the event handler, you can get the [RowDataBoundEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.RowDataBoundEventArgs-1.html) object, which contains details of the row. You can use this object to modify the row’s appearance, add custom elements, or perform any other customization.
+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.
-Here’s an example of how you can use the `RowDataBound` event to customize the styles of rows based on the value of the **Freight** column. 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 then be defined in your stylesheet to apply the desired styles to the rows:
+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:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -124,17 +123,17 @@ 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 can also be used to customize cells and is triggered for every cell in the Grid. It can be useful when you need to customize cells based on certain conditions or criteria.
+> 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.
### Using CSS
-You can apply styles to the rows using CSS selectors. The Syncfusion® Blazor DataGrid provides a class name for each row element, which you can use to apply styles to that specific row.
+Apply styles to rows using CSS selectors. Each row element exposes class names that can be targeted for customization.
**Customize alternate rows**
-You can customize the appearance of the alternate rows using CSS. This can be useful for improving the readability of the data and making it easier to distinguish between rows. By default, Grid provides the CSS class **.e-altrow** to style the alternate rows. You can customize this default style by overriding the **.e-altrow** class with your custom CSS styles.
+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.
-To change the background color of the alternate rows, you can add the following CSS code to your application’s stylesheet:
+To change the background color of alternate rows, add the following CSS:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -219,18 +218,15 @@ public class OrderData
**Customize selected row**
-You can customize the appearance of the selected row using CSS. This is useful when you want to highlight the currently selected row for improve the visual appeal of the Grid. By default, the Grid provides the CSS class **.e-selectionbackground** to style the selected row. You can customize this default style by overriding the **.e-selectionbackground** class with your own custom CSS styles.
+Customize the selected row using CSS to clearly highlight the active selection. Override the default `.e-selectionbackground` class to apply custom styles.
-To change the background color of the selected row, you can add the following CSS code to your application:
+To change the background color of the selected row, add the following CSS:
```css
#CustomGrid .e-selectionbackground {
background-color: #f9920b;
}
```
-
-Here’s an example of how to use the **.e-selectionbackground** class to style the selected row:
-
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -316,9 +312,7 @@ public class OrderData
## Row height
-The Syncfusion® Blazor DataGrid allows you to customize the height of rows based on your needs. This feature can be useful when you need to display more content in a row or when you want to reduce the height of rows to fit its content. You can achieve this 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 Grid. This property allows you to change the height of the entire Grid row to your desired value.
-
-In the below example, we will demonstrate how to dynamically change the height of the rows using the `RowHeight` property:
+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.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -418,17 +412,13 @@ public class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBJWDgtqYsIJUYQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> The `RowHeight` property can only be used to set the height of the entire Grid row. It cannot be used to set the height of individual cells within a row.
-> The `RowHeight` property applies the height to all rows in the Grid, including the header and footer rows.
-> You can also set the height for a specific row using the `RowHeight` property of the corresponding row object in the [RowDataBound](https://blazor.syncfusion.com/documentation/datagrid/events#rowdatabound) event.
+> The `RowHeight` property sets the height for all Grid 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.
### Customize row height for particular row
-Customizing the row height for a particular row can be useful when you want to display more content in a particular row, reduce the height of a row to fit its content, or make a specific row stand out from the other rows in the Grid. 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 Grid along with the [RowDataBound](https://blazor.syncfusion.com/documentation/datagrid/events#rowdatabound) event.
-
-The `RowHeight` property of the Grid allows you to set the height of all rows in the Grid to a specific value. However, if you want to customize the row height for a specific row based on the row data, you can use the `RowDataBound` event. This event is triggered every time a request is made to access row information, element, or data, and before the row element is appended to the Grid element.
-
-In the below example, the row height for the row with **OrderID** as ‘10249’ is set as ‘90px’ using the `RowDataBound` event.
+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.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -525,11 +515,9 @@ public class OrderData
## Row hover
-The Row Hover feature in the Syncfusion® Blazor 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 Grid. 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 Grid.
+The row hover feature applies a visual effect when the mouse pointer is over a row, improving readability and helping to identify the focused record. Enable or disable the effect using the [EnableHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableHover) property.
-By default, 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**.
-
-Here is an example that demonstrates how to enable/disable row hover based on the [Switch](https://blazor.syncfusion.com/documentation/toggle-switch-button/getting-started-webapp):
+By default, `EnableHover` is **true**. Set it to **false** to disable row hover.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -616,17 +604,15 @@ Here is an example that demonstrates how to enable/disable row hover based on th
{% 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, not individual rows or columns.
+> The `EnableHover` property applies to the entire Grid rather than to specific rows or columns.
## Row pinning (Frozen)
-The Syncfusion® Blazor DataGrid allows you to freeze 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.
-
-To know about frozen rows in Grid, you can check this video.
+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.
{% 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**. This configuration freezes the top two rows of the Grid, and they will remain fixed in their positions while the rest of the Grid can be scrolled vertically:
+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:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -732,16 +718,16 @@ public class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrTMjUtTMnyFhpX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> Frozen rows should not be set outside the Grid view port.
-> Frozen Grid will support row virtualization feature, which helps to improve the Grid performance while loading a large dataset.
-> The frozen feature is supported only for the rows that are visible in the current view.
-> You can use both [FrozenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenColumns) property and [FrozenRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenRows) property in the same application.
+> Frozen rows should remain within the Grid viewport.
+> Frozen Grid supports row virtualization to improve performance with large 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.
### Change default frozen rows line color
-You can easily customize the frozen line background color of frozen rows in the Syncfusion® Blazor DataGrid by applying custom CSS styles to the specific frozen row. This allows you to change the background color of frozen rows to match your application’s design and theme.
+The frozen row background color in the Syncfusion® Blazor DataGrid can be customized by applying CSS styles, allowing alignment with the application's theme.
-To change the default frozen rows line color, you can use the following CSS class:
+Apply the following CSS to change the default line color:
```css
.e-grid .e-frozenrow-border {
@@ -749,8 +735,6 @@ To change the default frozen rows line color, you can use the following CSS clas
}
```
-By applying this CSS class, you can set the background color of frozen rows to the specified RGB color. The following example demonstrates how to change the default frozen rows line color using CSS.
-
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -842,7 +826,7 @@ public class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVpWNgjTWFRHyLC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> When a validation message is displayed in the frozen part (Left, Right, Fixed) of the table, scrolling is prevented until the validation message is cleared.
+> When a validation message is displayed in the frozen area (Left, Right, or Fixed), scrolling is blocked until the message is cleared.
### Limitations
@@ -850,14 +834,13 @@ Frozen row is not compatible with the Autofill feature.
## Adding a new row programmatically
-The Syncfusion® Blazor DataGrid provides a way to add a new row to the Grid programmatically. This feature is useful when you want to add a new record to the Grid without having the manually enter data in the Grid.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 Grid.
+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 `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 will be added at the end of the Grid.
+ - 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 of how to add a new row using the `AddRecordAsync` method:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -989,15 +972,15 @@ public class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhzsZKZJLyoxcEx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> When working with remote data, it is impossible to add a new row between the existing rows.
-> If you want to add a new record to the beginning of the data source, you can pass 0 as the second parameter to the `AddRecordAsync` method.
-> If you do not specify an index, the new row will be added at the end of the Grid.
+> When working with remote data, adding a new row between existing rows is not supported.
+> 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
-The Syncfusion® Blazor DataGrid provides several methods to retrieve row data and elements. This feature is useful when you need to access specific rows, perform custom operations, or manipulate the data displayed in the Grid.
+The Syncfusion® Blazor DataGrid exposes methods to retrieve row data and elements for custom operations.
-1. [GetRowIndexByPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetRowIndexByPrimaryKeyAsync_System_Object_): The method allows you to retrieve the row index based on a specific primary key value or row data.
+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.
```cs
GetRowIndexByPrimaryKey
@@ -1013,7 +996,7 @@ The Syncfusion® Blazor DataGrid provides se
}
```
-2. [GetSelectedRowIndexesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetSelectedRowIndexesAsync): This methods allows you to get 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): Returns the collection of selected row indexes.
```cs
GetSelectedRowIndexes
@@ -1031,11 +1014,9 @@ The Syncfusion® Blazor DataGrid provides se
## Master Detail DataGrid
-The Syncfusion® Blazor DataGrid has an option to visualize details of a record in another Grid in a master and detail manner. By clicking the master Grid row, the detail Grid will be populated with the corresponding data. This can be achieved as follows:
-
-Using the [RowSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowSelected) event of the Master Grid, get the selected record details. Based on these selected record details, filter the data using 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 resultant data to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property of the Detail Grid.
+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.
-In the following sample, click the row in the master Grid, which shows the details in another(detail) Grid.
+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).
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
|