<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.

Last modified: February 28, 2021

Author

Comments

Write a Reply or Comment