DxDataGrid<T>.DetailRowTemplate Property

Specifies a template used to display a detail row.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

[Parameter]
public RenderFragment<T> DetailRowTemplate { get; set; }

Property Value

Type Description
RenderFragment<T>

The template content. Here, <T> is the grid’s data item type that equals the type of items stored in a bound data collection (IEnumerable<T> or IQueryable<T>).

Remarks

The Data Grid component allows you to build master-detail layouts of any complexity. To implement a detailed view, do the following:

  1. Add the master grid to your application.
  2. Bind the master grid to data and enable its ShowDetailRow property to display corresponding detail rows.
  3. Add the master grid’s columns to the Columns collection.
  4. Create the detailed view. Add the second data grid to the master grid’s DetailRowTemplate and bind this grid to a detail data source that uses the template’s context object as a filter criterion.
  5. (Optional) To collapse an expanded detail row when a new detail row is displayed, set the AutoCollapseDetailRow property to true.
  6. Specify the key data field to enable the Data Grid to identify individual data items.
<DxDataGrid @ref="@grid" 
            Data="@ProductsDataSource" 
            AutoCollapseDetailRow="true" 
            ShowDetailRow="true"
            KeyFieldName="Id">
    <Columns>
        <DxDataGridColumn Field="@nameof(Product.Name)" />
        <DxDataGridColumn Field="@nameof(Product.Description)" />
        <DxDataGridSpinEditColumn Field="@nameof(Product.ListPrice)" />
        <DxDataGridSpinEditColumn Field="@nameof(Product.UnitsInInventory)" />
        <DxDataGridSpinEditColumn Field="@nameof(Product.UnitsInManufacturing)" />
    </Columns>
    <DetailRowTemplate>
        <DxTabs>
            <DxTabPage Text="Sales">
                <div class="p-3">
                    @if (SalesDataSource != null) {
                        <DxDataGrid Data="@SalesDataSource.Where(x => x.ProductId == context.Id)" 
                                    SelectionMode="DataGridSelectionMode.None">
                            <DxDataGridDateEditColumn Field="@nameof(Sale.SaleDate)" />
                            <DxDataGridSpinEditColumn Field="@nameof(Sale.Units)" />
                            <DxDataGridSpinEditColumn Field="@nameof(Sale.TotalCost)" />
                            <DxDataGridSpinEditColumn Field="@nameof(Sale.Discount)" />
                        </DxDataGrid>
                    }
                    else {
                        <em>Loading Sales...</em>
                    }
                </div>
            </DxTabPage>
            <DxTabPage Text="Plant Info">
                ...
            </DxTabPage>
        </DxTabs>
    </DetailRowTemplate>
</DxDataGrid>

DataGrid Master Detail

Run Demo Watch Video

See Also