We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Can a grid have more than 1 child grid

Thread ID:

Created:

Updated:

Platform:

Replies:

148198 Oct 9,2019 08:12 PM UTC Oct 17,2019 05:15 AM UTC ASP.NET Core - EJ 2 3
loading
Tags: DataGrid
Ronald Dirkx
Asked On October 9, 2019 08:12 PM UTC

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 [Syncfusion]
Replied On 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. 


Ronald Dirkx
Replied On 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

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon