Can a grid have more than 1 child grid

[Ronald Dirkx]

In the documentation of Hierarchical Binding (grid/hierarchy-grid) the Info text beneath the first example codes states: Grid supports n level of child grids.

I guess this means that a child grid can have a child grid of its own?

But can 1 grid have multiple child grids related to the header level of the grid?

For example: I want to have a grid that shows Users and then I want 2 child grids, 1 child grid that shows the Profiles per User and another child grid that shows Permissions per User.

Is this possible?

thanks

Ronald

[Thavasianand Sankaranarayanan]

Hi Ronald , 

 

Greetings from Syncfusion support. 

 

Query : Can a grid have more than one child grid. 

 

Yes, grid can have more than one child grid using detail template feature. Please follow the below solution to solve this issue. A sample is attached below that clearly shows the two grids act as a child grid. 

 

Index.cshtml 

 

<div class="container"> 

 <ejs-grid id="Grid" allowPaging="true" dataSource="ViewBag.DataSource" detailDataBound="detailDataBound" detailTemplate="#detailtemplate1">
<e-grid-pagesettings pageSize="7"> </e-grid-pagesettings>
<e-grid-columns>
...
</ejs-grid>
</div>

<script type="text/x-template" id="detailtemplate1">  

    <div class="detailgridone"></div> 

    <div class="detailgrid2"></div> 

</script>

<script>  

    function detailDataBound(e) { 

     var firstdetailgrid = new ej.grids.Grid({ 

            dataSource: [], 

            height: 300, 

            columns: [ 

                { field: 'OrderID', headerText: 'Order ID', width: 110 }, 

                { field: 'EmployeeID', headerText: 'Employee ID', width: 110 } 

            ] 

        }); 

firstdetailgrid.appendTo(e.detailElement.querySelector('.detailgridone'));

     var secGrid = new ej.grids.Grid({ 

            dataSource: [], 

            height: 300, 

            columns: [ 

                { field: 'OrderID', headerText: 'Order ID', width: 110 }, 

                { field: 'EmployeeID', headerText: 'Employee ID', width: 110 } 

            ] 

        }); 

 

        secGrid.appendTo(e.detailElement.querySelector('.detailgrid2'));

 

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/245141-detailTemplate_--1596990897 

 

Documentation link :  https://ej2.syncfusion.com/aspnetcore/documentation/grid/row/#detail-template 

 

Regards, 

Thavasianand S. 

[Ronald Dirkx]

Thanks for this sample.

However it seems that you are rendering "other" grids in the detail template but that there is no parent-child relation:

- can I define queryString?

- can I use parentDetails.parentKeyFieldValue?

thanks

Ronald

[Thavasianand Sankaranarayanan]

Hi Ronald, 

 

Query : Can I define queryString? 

 

Yes, youcan define querystring to get the field to be matched. Here we use "EmployeeID" as a querystring. 

 

Query : Can I use parentDetails.parentKeyFieldValue? 

 

Yes, you can use it by the following code "e.data.EmployeeID". 

 

A working sample is attached below for your reference. On there we use the above mentioned methods to render a child grid into a parent grid. 

 

index.cshtml 

 

<script type="text/x-template" id="detailtemplate1">  

    <div class="detailgridone"></div> 

    <div class="detailgrid2"></div> 

</script> 

 

function detailDataBound(e) { 

 

       let data = [{ 

           OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), 

           ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', 

        ... 

             ]{ 

 

 let firstgrid = new ej.grids.Grid({ 

           dataSource: [], 

           columns: [ 

           { field: 'EmployeeID', headerText: 'Employee ID', width: 110 } 

           ] 

         }); 

         firstgrid.appendTo(e.detailElement.querySelector('.detailgridone')); 

         let queryString = 'EmployeeID';  //  queryString used 

         let query = new ej.data.Query().where(queryString, 'equal', e.data.EmployeeID);  //  parentKeyFieldValue used  

         new ej.data.DataManager({ json: data }).executeQuery(query).then((e) => { 

         firstgrid.dataSource = e.result; 

        }) 

 

       let secondgrid = new ej.grids.Grid({ 

           dataSource: [], 

           columns: [ 

            { field: 'EmployeeID', headerText: 'EmployeeID', width: 110 } 

            ] 

        }); 

           secondgrid.appendTo(e.detailElement.querySelector('.detailgrid2')); 

           queryString = 'EmployeeID';   //  queryString used 

           query = new ej.data.Query().where(queryString, 'equal', e.data.EmployeeID);  //  parentKeyFieldValue used  

           new ej.data.DataManager({ json: data }).executeQuery(query).then((e) => { 

           secondgrid.dataSource = e.result; 

        }) 

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/245141-detailTemplate_-_(2)751596620 

 

Please get back to us if you need further assistance 

 

Regards, 

Thavasianand S.