IDataGridDetailRows Interface

Ships a detail row’s settings.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.2.dll

Declaration

public interface IDataGridDetailRows :
    IComponentService,
    IDisposable

Related API Members

The following members accept/return IDataGridDetailRows objects:

• DxDataGrid<T>.DetailRows

Remarks

Objects that implement the IDataGridDetailRows interface are used to specify the DetailRows property value.

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

<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