How to define multi-level child products in a Blazor Grid?

[Greg Finzer]

I am using Blazor Server.  I would like to define a Syncfusion Blazor Grid that has a hierarchy of products.  This example only has one level in the hiearchy:
https://blazor.syncfusion.com/demos/datagrid/hierarchy-grid?theme=fluent

Here is my class:

    [Table("Products")]
    public class Product : BaseEntity
    {
        [Key]
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public Int32 ProductId { get; set; }


        public Int32? ParentProductId { get; set; }


        // Navigation property for the parent product
        public Product? ParentProduct { get; set; }


        [Required]
        [MaxLength(50)]
        public string Name { get; set; }


        public string Description { get; set; }


        public decimal Price { get; set; }


        public int ServiceTimeInMinutes { get; set; }


        // Collection for child products
        public List<Product> ChildProducts { get; set; }
    }

[Sarveswaran Palani]

Hi Greg,

Greetings from Syncfusion support.

Based on your query, it seems that you're interested in defining multi-level child products within a grid. We'd like to inform you that you can achieve this by defining a multi-level hierarchy with a detail template for each parent grid. To assist you further, we have attached a sample along with the corresponding code snippet for your reference.

<SfGrid @ref="Grid" DataSource="@OrderDetails" TValue="OrderDetail" Height="315px">

    <GridTemplates>

        <DetailTemplate>

            @{

                var orderDetail = (context as OrderDetail);

                <SfGrid DataSource="@Customers" Query="@(new Query().Where("OrderID", "equal", orderDetail.OrderID))">

                    <GridColumns>

                        <GridColumn Field=@nameof(Customer.CustomerID) HeaderText="Customer ID" Width="110"></GridColumn>

                        <GridColumn Field=@nameof(Customer.EmployeeID) HeaderText="Employee ID" Width="110"></GridColumn>

                        <GridColumn Field=@nameof(Customer.CustomerName) HeaderText="Customer Name" Width="110"></GridColumn>

                        <GridColumn Field=@nameof(Customer.Country) HeaderText="Country" Width="110"></GridColumn>

                    </GridColumns>

                    <GridTemplates Context="con1">

                        <DetailTemplate >

                            @{

                                var customer = (con1 as Customer);

                                <SfGrid DataSource="@Employees" Query="@(new Query().Where("CustomerID", "equal", customer.CustomerID))">

                                    <GridColumns>

                                        <GridColumn Field=@nameof(EmployeeData.EmployeeID) HeaderText="Employee ID" Width="110"></GridColumn>

                                        <GridColumn Field=@nameof(EmployeeData.ProductID) HeaderText="Product ID" Width="110"></GridColumn>

                                        <GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="110"></GridColumn>

                                        <GridColumn Field=@nameof(EmployeeData.LastName) HeaderText="Last Name" Width="110"></GridColumn>

                                    </GridColumns>

                                    <GridTemplates Context="con2">

                                        <DetailTemplate>

                                            @{

                                                var employee = (con2 as EmployeeData);

                                                <SfGrid DataSource="@Products" Query="@(new Query().Where("EmployeeID", "equal", employee.EmployeeID))">

                                                    <GridColumns>

                                                        <GridColumn Field=@nameof(Product.ProductID) HeaderText="Product ID" Width="110"></GridColumn>

                                                        <GridColumn Field=@nameof(Product.ProductName) HeaderText="Product Name" Width="110"></GridColumn>

                                                        <GridColumn Field=@nameof(Product.UnitPrice) HeaderText="Unit Price" Width="110"></GridColumn>

                                                    </GridColumns>

                                                </SfGrid>

                                            }

                                        </DetailTemplate>

                                    </GridTemplates>

                                </SfGrid>

                            }

                        </DetailTemplate>

                    </GridTemplates>

                </SfGrid>

            }

        </DetailTemplate>

    </GridTemplates>

    <GridColumns>

        <GridColumn Field=@nameof(OrderDetail.OrderID) HeaderText="Order ID" Width="110"></GridColumn>

        <GridColumn Field=@nameof(OrderDetail.CustomerID) HeaderText="Customer ID" Width="110"></GridColumn>

        <GridColumn Field=@nameof(OrderDetail.OrderDate) HeaderText="Order Date" Width="110"></GridColumn>

    </GridColumns>

</SfGrid>

 

@code {

    public SfGrid<OrderDetail> Grid;

 

    List<OrderDetail> OrderDetails = new List<OrderDetail>

    {

    new OrderDetail() { OrderID = 1, OrderDate = new DateTime(2024, 1, 15), CustomerID=101 },

    new OrderDetail() { OrderID = 2, OrderDate = new DateTime(2024, 1, 16), CustomerID=102},

    };

 

    List<Customer> Customers = new List<Customer>

    {

    new Customer() { CustomerID = 101, CustomerName = "Customer1", Country = "USA", EmployeeID=1001, OrderID=1 },

    new Customer() { CustomerID = 102, CustomerName = "Customer2", Country = "UK", EmployeeID=1002 , OrderID=2},

    };

 

    List<EmployeeData> Employees = new List<EmployeeData>

    {

    new EmployeeData() { EmployeeID = 1001, CustomerID=101, FirstName="Nancy", LastName="Fuller", Title="Sales Representative", Country="USA", ProductID=501 },

    new EmployeeData() { EmployeeID = 1002, CustomerID=102, FirstName="Andrew", LastName="Davolio", Title="Vice President", Country="UK", ProductID=502 },

    };

 

    List<Product> Products = new List<Product>

    {

    new Product() { ProductID = 501, ProductName = "Product1", UnitPrice = 10.5M, EmployeeID=1001 },

    new Product() { ProductID = 502, ProductName = "Product2", UnitPrice = 20.0M, EmployeeID=1002 },

    };

 

    public class OrderDetail

    {

        public int? OrderID { get; set; }

        public DateTime? OrderDate { get; set; }

        public int? CustomerID { get; set; }

    }

 

    public class Customer

    {

        public int? CustomerID { get; set; }

        public int? OrderID { get; set; }

        public string CustomerName { get; set; }

        public string Country { get; set; }

        public int? EmployeeID { get; set; }

    }

 

    public class Product

    {

        public int? ProductID { get; set; }

        public string ProductName { get; set; }

       public decimal? UnitPrice { get; set; }

        public int? EmployeeID { get; set; }

    }

 

    public class EmployeeData

    {

        public int? EmployeeID { get; set; }

        public int? ProductID { get; set; }

        public int? CustomerID { get; set; }

        public string FirstName { get; set; }

        public string LastName { get; set; }

        public string Title { get; set; }

        public string Country { get; set; }

    }

}

 

Sample: https://blazorplayground.syncfusion.com/embed/LthTDMMSRBjZvZOx?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Reference: https://blazor.syncfusion.com/documentation/datagrid/detail-template

If you have any further queries, please get back to us.

Regards,
Sarvesh