Skip to main content

DxDataGrid<T>.DetailRows Property

Provides access to a detail row’s settings.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.1.dll

Declaration

public virtual IDataGridDetailRows DetailRows { get; }

Property Value

Type Description
IDataGridDetailRows

An object that implements the IDataGridDetailRows interface and ships detail row settings.

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.

Set the ShowDetailRow property to true and specify the DetailRowTemplate to enable a master-detail relationship in the grid.

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

See Also