Skip to main content

DxDataGrid<T>.DetailRowTemplate Property

Specifies a template used to display a detail row.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.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

Important

The Data Grid was moved to maintenance support mode. No new features/capabilities will be added to this component. We recommend that you migrate to the Grid component.

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. Add <DetailRowTemplate></DetailRowTemplate> to the grid’s markup to create the detailed view. Specify the template’s context parameter to access data item properties.
  5. Add the second data grid to the template. Bind the 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.
  7. Specify the key data field to enable the grid to identify individual data items.

Data Grid - Show detail rows

<DxDataGrid ...>
        <Columns>
            @* ... *@
        </Columns>
        <DetailRowTemplate Context="dataItem">
            <DxTabs>
                <DxTabPage Text="Invoices">
                    <div class="p-3">
                        <DxDataGrid DataAsync="@GetInvoicesByCustomerAsync(dataItem)"
                                    SelectionMode="DataGridSelectionMode.None"
                                    LayoutRestoring="@GetDetailsGridLayoutRestoringDelegate(dataItem)"
                                    LayoutChanged="@GetDetailsGridLayoutChangedDelegate(dataItem)"
                                    PageSize="5">
                            <DxDataGridColumn Field="@nameof(Invoice.OrderId)" />
                            <DxDataGridDateEditColumn Field="@nameof(Invoice.OrderDate)"
                                                      DisplayFormat="d" />
                            <DxDataGridDateEditColumn Field="@nameof(Invoice.ShipName)" />
                            <DxDataGridDateEditColumn Field="@nameof(Invoice.ShippedDate)"
                                                      DisplayFormat="d" />
                            <DxDataGridSpinEditColumn Field="@nameof(Invoice.UnitPrice)"
                                                      DisplayFormat="c" />
                            <DxDataGridSpinEditColumn Field="@nameof(Invoice.Quantity)" />
                        </DxDataGrid>
                    </div>
                </DxTabPage>
                <DxTabPage Text="Contact Info">
                    <div class="p-3">
                        <DxFormLayout>
                            <DxFormLayoutItem Caption="Address:" ColSpanMd="12">
                                @dataItem.Address
                            </DxFormLayoutItem>
                            <DxFormLayoutItem Caption="Postal Code:" ColSpanMd="6">
                                @dataItem.PostalCode
                            </DxFormLayoutItem>
                            <DxFormLayoutItem Caption="Region:" ColSpanMd="6">
                                @dataItem.Region
                            </DxFormLayoutItem>
                            <DxFormLayoutItem Caption="City:" ColSpanMd="6">
                                @dataItem.City
                            </DxFormLayoutItem>
                            <DxFormLayoutItem Caption="Country:" ColSpanMd="6">
                                @dataItem.Country
                            </DxFormLayoutItem>
                            <DxFormLayoutItem Caption="Phone:" ColSpanMd="6">
                                @dataItem.Phone
                            </DxFormLayoutItem>
                            <DxFormLayoutItem Caption="Fax:" ColSpanMd="6">
                                @dataItem.Fax
                            </DxFormLayoutItem>
                        </DxFormLayout>
                    </div>
                </DxTabPage>
            </DxTabs>
        </DetailRowTemplate>
    </DxDataGrid>

Run Demo: Data Grid - Master-Detail View

Watch Video: Master Detail Layout

See Also