<SfGrid DataSource="@OrderList" AllowSelection="true" AllowSorting="true" AllowFiltering="true" EnableVirtualization="true" EnableHover="true" Height="600" RowHeight="38">
<GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>
<GridPageSettings PageSize="40"></GridPageSettings>
<GridTemplates>
<DetailTemplate>
@{
var order = (context as Order);
<SfGrid TValue="OrderItem" DataSource="@OrderItemList" Query="@(new Query().Where("OrderId", "equal", order.OrderId))" RowHeight="38">
<GridColumns>
<GridColumn Field=@nameof(OrderItem.OrderId) HeaderText="Order Id"></GridColumn>
<GridColumn Field=@nameof(OrderItem.ProductCode) HeaderText="Code"></GridColumn>
<GridColumn Field=@nameof(OrderItem.ProductName) HeaderText="Name"></GridColumn>
<GridColumn Field=@nameof(OrderItem.ProductSku) HeaderText="Sku"></GridColumn>
</GridColumns>
</SfGrid>
}
</DetailTemplate>
</GridTemplates>
<GridColumns>
<GridColumn Field=@nameof(Order.OrderId) HeaderText="Order Id"></GridColumn>
<GridColumn Field=@nameof(Order.OrderNumber) HeaderText="Order Number"></GridColumn>
<GridColumn Field=@nameof(Order.OrderStatus) HeaderText="Order Status"></GridColumn>
<GridColumn Field=@nameof(Order.OpenRegisterId) HeaderText="Open Register Id"></GridColumn>
<GridColumn Field=@nameof(Order.SubTotal) HeaderText="SubTotal"></GridColumn>
<GridColumn Field=@nameof(Order.Discount) HeaderText="Discount"></GridColumn>
<GridColumn Field=@nameof(Order.Tax) HeaderText="Tax"></GridColumn>
<GridColumn Field=@nameof(Order.OrderTotal) HeaderText="Order Total"></GridColumn>
<GridColumn Field=@nameof(Order.PaymentMethod) HeaderText="Payment Type"></GridColumn>
<GridColumn Field=@nameof(Order.ItemCount) HeaderText="Item Count"></GridColumn>
<GridColumn Field=@nameof(Order.CreatedDate) HeaderText="Order Created"></GridColumn>
<GridColumn Field=@nameof(Order.AssignedToEmployeeName) HeaderText="Employee"></GridColumn>
<GridColumn Field=@nameof(Order.Note) HeaderText="Order Note"></GridColumn>
</GridColumns>
</SfGrid>
<SfGrid DataSource="@Employees" AllowSelection="true" AllowSorting="true" AllowFiltering="true" EnableHover="true" Height="600" RowHeight="38">
. . .
<GridTemplates>
<DetailTemplate>
@{
var employee = (context as EmployeeData);
<SfGrid DataSource="@Orders" Query="@(new Query().Where("EmployeeID", "equal", employee.EmployeeID))" RowHeight="38">
. . .
</SfGrid>
}
</DetailTemplate>
</GridTemplates>
<GridColumns>
. . .
</GridColumns>
</SfGrid>
Note: The RowHeight property must be set for both the parent and the child grid in order for the content to display correctly.
Comments