Header vs Details Grid

[Sejal Sheth]

I have a class data source that loads the data in the parent grid correctly. I am programming Razor page using c# and ASP.NET

The class looks like below

Header Class:

• string Name
• string City
• List<details> familymembers

Detail Class:

• string relationToHeader
• bool isAdult

Can you please advise and guide me in the right direction to have the details grid work correctly. Right now, the details are not loading.

Thank you

[Rajapandiyan Settu]

Hi Sejal Sheth, 

Thanks for contacting Syncfusion support. 

 

We have prepared a simple sample with your exact scenario. In that sample, we have nested detail data (used for child-grid dataSource) in the parent-grid dataSource. By using detailDataBound event we dynamically load this nested data as child-Grid’s dataSource. Please refer the below code example and sample for more information.  

detailDataBound: https://ej2.syncfusion.com/javascript/documentation/api/grid/#detaildatabound 

<div> 

@{  

       var ChildGrid = new Syncfusion.EJ2.Grids.Grid() { 

           QueryString = "EmployeeID",            

           Columns = new List<Syncfusion.EJ2.Grids.GridColumn> { 

                ---- 

        } 

       }; 

} 

         

<ejs-grid id="Grid1" dataSource=Model.Datasource2 childGrid="ChildGrid" detailDataBound="detailDataBound" allowPaging="true">             

    ----- 

</ejs-grid> 

</div> 

 

<script> 

    function detailDataBound(args){ 

                  // bind the nested data from the parent grid datasource directly to the childGrid 

        args.childGrid.dataSource = args.data.FamilyMembers; 

    } 

</script> 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_net6_razorpages_hierarcy_Grid-1425662512.zip 

We also suggest you to use separate dataSource for childGrid in your data base. Find the below code example for your reference. 

 

 

<div> 

@{  

       var ChildGrid2 = new Syncfusion.EJ2.Grids.Grid() { 

           DataSource = Model.ChildDataSource, 

           QueryString = "EmployeeID",            

           Columns = new List<Syncfusion.EJ2.Grids.GridColumn> { 

                --- 

        } 

       }; 

   } 

         

<ejs-grid id="Grid2" dataSource=Model.Datasource2 childGrid="ChildGrid2" allowPaging="true">             

    ---- 

</ejs-grid> 

</div> 

 

Refer to the below documentation to know about the hierarchy binding. 

https://ej2.syncfusion.com/aspnetcore/Grid/MasterDetailsExport#/bootstrap5 

https://ej2.syncfusion.com/javascript/documentation/grid/hierarchy-grid/ 

Please get back to us if you need further assistance with this. 

Regards, 

Rajapandiyan S 

[Sejal Sheth]

Thank you for the example. That helped a lot. 

One last question - Is there a way to set it up so that the child grid will open expanded?

Thank you

[Rajapandiyan Settu]

Hi Sejal Sheth, 

Thanks for your update. 

By default, the Hierarchy Grid is rendered in the collapsed state. This is the intended behavior of Grid. However, you can render the Hierarchy Grid in expanded state by invoking the expandAll method in the dataBound event of Grid. 

expandAll: https://ej2.syncfusion.com/javascript/documentation/api/grid/detailRow/#expandall 

dataBound: https://ej2.syncfusion.com/javascript/documentation/api/grid/#databound 

[index.cshtml] 

<ejs-grid id="Grid" dataSource=Model.Datasource childGrid="ChildGrid" dataBound="dataBound" allowPaging="true">             

    --- 

</ejs-grid> 

</div> 

 

<script> 

    function dataBound(args) { 

        var gridIns = document.getElementById("Grid").ej2_instances[0]; // get the Grid instances 

        gridIns.detailRowModule.expandAll(); // expand all the child-Grids 

    } 

</script> 

Please get back to us if you need further assistance. 

Regards, 

Rajapandiyan S