Nested(child) grid example

[Alex]

Hello,
I'm trying to build a parent-child grid system in my Aurelia-base application and I have some questions :
1. Is it possible to define a child grid within a parent grid in a view(html) ? something like this :
<ej-grid id="Parent" ........>
        <ej-column ......></ej-column>
        <ej-column ......></ej-column>
        ......
        <ej-grid id="Child" .......>
             <ej-column ......></ej-column>
             .............
        </ej-grid>
</ej-grid>
2. My parent grid get a data from a data manager (with web api adaptor) in this format :
[
 {
    "ParentField_1":"Value_1",
    "ParentField_2":"Value_2",
    "ChildItems": [{"ChildField_1":ChildValue_1,"ChildField_2":ChildValue_2},{"ChildField_1":ChildValue_1,"ChildField_2":ChildValue_2},{.......}]
  }
]
and it has a columns for parent fields only ("ParentField_1" and "ParentField_2"). How should I setup a data source in my child grid to get only a "ChildItems" array that already loaded by parent grid data manager ?

Any examples will be very helpful.
Thanks !

[Saravanan Arunachalam]

Hi Alex, 

Thanks for contacting Syncfusion’s support. 

We have analyzed your query and achieved it by using “detailsTemplate” feature of Grid control and please refer to the below code example and online documentation link. 

[index.html]           

<template> 

  <require from="./grid-wrapper"></require> 

   

  <div> 

      <ej-grid e-data-source.bind="gridData" e-on-details-data-bound.trigger="detailGridData($event)" e-details-Template="#ChildGridContents"> 

        . . . 

      </ej-grid> 

  </div> 

  <div> 

    <script id="ChildGridContents" type="text/template"> 

        <div id="detailGrid"+${EmployeeID}> 

        </div> 

    </script> 

  </div> 

</template> 

[index.js]  

export class Grid { 

  constructor() { 

    this.gridData = [{EmployeeID:1, FirstName: "David",Order:[{OrderID:100,ShipCity:"Reims"}]},  

                        {EmployeeID:2, FirstName: "Doe", Order:[{OrderID:101,ShipCity:"Rio de Jeniro"}]}, 

                        {EmployeeID:3, FirstName: "John", Order:[{OrderID:102,ShipCity:"Reims"},  

                        {OrderID:103,ShipCity:"Los Angels"}]}]; 

     

  } 

  detailGridData(e) { 

    var childData = e.data.Order; 

    e.detailsElement.find("#detailGrid").ejGrid({ 

        dataSource: childData, 

        . . .         

    }); 

  } 

} 

 

 

https://help.syncfusion.com/js/grid/row#details-template  

Regards, 

Saravanan A. 

[Alex]

Thank you Saravanan, your example helped me a lot.

[Saravanan Arunachalam]

Hi Alex,  

Thanks for your update.            

We are happy that the provided information helped you. 

Regards, 

Saravanan A.