Is it possible to implement a drill-down view in SfGrid for two or more levels through DetailTemplate?

[Syncfusion Support]

Answer:

You can render multiple levels of DetailTemplate based on your need. Here, we have rendered two levels of detail template. Find the below code snippets and sample for your reference.

<SfGrid DataSource="@Employees">

<GridTemplates>

<DetailTemplate>

@{

var employee = (context as EmployeeData);

<SfGrid TValue="Order" Query="@GetEmployeesQuery(employee)" AllowPaging="true">

<GridPageSettings PageSize="8">GridPageSettings>

<SfDataManager Url="https://js.syncfusion.com/demos/ejservices/Wcf/Northwind.svc/Orders" CrossDomain="true">SfDataManager>

<GridTemplates>

<DetailTemplate Context="CustomerContext">

@{

var orders = (CustomerContext as Order);

<SfGrid TValue="CustomerDetails" Query="@GetOrderQuery(orders)">

<SfDataManager Url="https://js.syncfusion.com/demos/ejservices/Wcf/Northwind.svc/Customers" CrossDomain="true">SfDataManager>

. . .

SfGrid>

}

DetailTemplate>

GridTemplates>

<GridColumns>

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

. . .

GridColumns>

SfGrid>

}

DetailTemplate>

GridTemplates>

<GridColumns>

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

. . .

GridColumns>

SfGrid>

You can get the sample from here.

Reference:

https://blazor.syncfusion.com/documentation/datagrid/row/#rendering-custom-component

https://blazor.syncfusion.com/demos/datagrid/hierarchy-grid?theme=bootstrap4