Hierarchy grid with local data binding (JS 2 for JavaScript)

[ttArbor]

I have a set of nested data that looks like this :

   data =  [

          {id: 1,

            name:'name1',

            children :[

                    id:1,

                    title:'title1',

                    count: 10,

                    level: 'level1'

               ]   

             }

            {id: 2,

            name:'name2',

            children :[

                    id: 2,

                    title:'title2',

                    count: 11,

                    level: 'level1'

               ]   }

     ]

I'm using JS 2 for JavaScript as below: 

let grid: Grid = new Grid( { dataSource: data, allowPaging: true, columns: [ { field: 'id', headerText: 'ID', width: 120, textAlign: 'Right' }, { field: 'name', headerText: 'Name' ], }); grid.appendTo('#Grid');

How do I bind childgrid to children objects of each item in the list above 

[Vignesh Natarajan]

Hi Thao,  

 

Thanks for contacting Syncfusion forums. 

 

Query: “How do I bind childgrid to children objects of each item in the list above ” 

 

From your query and data structure, we suspect that your requirement can be achieved using TreeGrid component. Kindly refer our UG documents and online demo for your reference 

 

User Guide: https://ej2.syncfusion.com/angular/documentation/treegrid/data-binding/    

 

API: https://ej2.syncfusion.com/angular/documentation/api/treegrid/  

 

Online Demo: https://ej2.syncfusion.com/angular/demos/#/material/treegrid/treegrid-overview  

 

For your convenience we have prepared a sample using your data in EJ2 TreeGrid. Kindly refer the below link for the sample  

 

https://stackblitz.com/edit/angular-5o7sek-nmdezg?file=app.component.ts  

 

Please get back to us if you have further queries.  

 

Regards 

Vignesh Natarajan. 

[ttArbor]

maybe the sample data I gave is not so clear. If notice data structure of child objects are different from the parent and that's the reason why i'm using hierarchy grid. 

If there's a way tree grid can display different columns for children, can you provide a sample for it?

 data =  [

          {id: 1,

            name:'name1',

            children :[

                    id:1,

                    title:'title1',

                    count: 10,

                    level: 'level1',

                    description: 'sample data ',

                    modifiedDate: '4/7/2018'

               ]   

             }

            {id: 2,

            name:'name2',

            children :[

                    id: 2,

                    title:'title2',

                    count: 11,

                    level: 'level1',

                     description: 'sample data ',

                     modifiedDate: '4/10/2018'

               ]   }

     ]

[Hariharan J V]

Hi Thao, 

 

Thanks for your update. 

 

We have achieved your requirement in EJ2 Grid by using `detailDataBound` event, please refer the below sample and code snippets. 

 

[app.component.ts] 

  detailDataBound(e){     

   e.childGrid.dataSource = e.data.children;   

  } 

 

 

Sample: https://stackblitz.com/edit/angular-x5jpnf?file=app.component.ts 

 

Regards, 

Hariharan 

[ttArbor]

works great! thank you

[Hariharan J V]

Hi Thao, 

 

Thanks for your update.  

  

We are happy to hear that the provided solution helped you.   

  

Please contact us if you need any further assistance. As always, we will be happy to assist you.   

  

Regards, 

Hariharan