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:
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>
See Also