1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Can a grid have more than 1 child grid

Can a grid have more than 1 child grid

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

3 Replies
TS Thavasianand Sankaranarayanan Syncfusion Team October 10, 2019 06:19 PM UTC

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'));

 
 
 
 
Regards, 
Thavasianand S. 


RD Ronald Dirkx October 11, 2019 09:56 AM UTC

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

TS Thavasianand Sankaranarayanan Syncfusion Team October 17, 2019 05:15 AM UTC

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; 
        }) 
 
 
Please get back to us if you need further assistance 
 
Regards, 
Thavasianand S. 


Loader.
Up arrow icon