Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxGrid.DetailRowTemplate Property

Specifies a template used to display a detail row.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

#Property Value

Type Description
RenderFragment<GridDetailRowTemplateContext>

The detail row template.

#Remarks

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.

razor
<DxGrid Data="GridData" >
    <Columns>
        @* ... *@
    </Columns>
    <DetailRowTemplate>
        @{
            var employee = (Employee)context.DataItem;
            <text>@employee.Notes</text>
        }
    </DetailRowTemplate>
</DxGrid>

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, follow the steps below:

  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">
    <Columns>
        <DxGridDataColumn FieldName="ContactName" SortIndex="0" />
        <DxGridDataColumn FieldName="CompanyName" />
        <DxGridDataColumn FieldName="Country" />
        <DxGridDataColumn FieldName="City" />
    </Columns>
    <DetailRowTemplate>
        <Grid_MasterDetail_NestedGrid_DetailContent Customer="(Customer)context.DataItem" />
    </DetailRowTemplate>
</DxGrid>

@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.ExpandDetailRow(0);
        }
    }
}

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 component, refer to the following topic: Templates in Blazor Grid.

#Implements

See Also