Skip to main content

DxGrid.DetailRowTemplate Property

Specifies a template used to display a detail row.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.1.dll

NuGet Package: DevExpress.Blazor


public RenderFragment<GridDetailRowTemplateContext> DetailRowTemplate { get; set; }

Property Value

Type Description

The detail row template.


The DetailRowTemplate property allows you to create a template for a detail row. You can use the template to display preview sections under each grid data row across all columns or to implement a nested grid to visualize a master-detail relationship between two data tables.

<DxGrid Data="GridData" >
        @* ... *@
            var employee = (Employee)context.DataItem;

Run Demo: Grid Row Preview

Master-Detail Grid

The Grid component allows you to create master-detail layouts of any complexity. To implement the layout with a nested grid, do the following:

  1. Add a master grid to your application.
  2. Bind the master grid to data and add columns to its Columns collection.
  3. Add the DetailRowTemplate to the grid’s markup to create a detail view.
  4. Optional. We recommend that you allocate the detail grid to a separate component. Separation improves the application structure and prevents excessive component redraw operations.
  5. Add a second data grid to the template. Bind this grid to a detail data source that uses the template’s context object as a filter criteria.
  6. Optional. To collapse an expanded detail row when a new detail row is displayed, set the AutoCollapseDetailRow property to true.
@inject NwindDataService NwindDataService

<DxGrid @ref="Grid" Data="MasterGridData" AutoCollapseDetailRow="true">
        <DxGridDataColumn FieldName="ContactName" SortIndex="0" />
        <DxGridDataColumn FieldName="CompanyName" />
        <DxGridDataColumn FieldName="Country" />
        <DxGridDataColumn FieldName="City" />
        <Grid_MasterDetail_NestedGrid_DetailContent Customer="(Customer)context.DataItem" />

@code {
    IGrid Grid { get; set; }
    object MasterGridData { get; set; }

    protected override async Task OnInitializedAsync() {
        MasterGridData = await NwindDataService.GetCustomersAsync();
    protected override void OnAfterRender(bool firstRender) {
        if(firstRender) {

Grid - Auto Collapse Detail Rows

Run Demo: Grid Master-Detail View - Nested Grid View Example: Grid for Blazor - Create a Master-Detail Layout View Example: Master-Detail with partial loading

For more information about templates in the Grid control, refer to the following topic: Templates in Blazor Grid.


See Also