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

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

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 

5 Replies

VN Vignesh Natarajan Syncfusion Team April 23, 2019 08:59 PM

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 
 
 
 
 
For your convenience we have prepared a sample using your data in EJ2 TreeGrid. Kindly refer the below link for the sample  
 
 
Please get back to us if you have further queries.  
 
Regards 
Vignesh Natarajan. 



TT ttArbor April 24, 2019 06:02 AM

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'
               ]   }
     ]


HJ Hariharan J V Syncfusion Team April 26, 2019 04:57 AM

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;   
  } 
 
 
 
Regards, 
Hariharan 



TT ttArbor April 26, 2019 05:45 AM

works great! thank you


HJ Hariharan J V Syncfusion Team April 28, 2019 08:55 PM

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 


Loader.
Live Chat Icon For mobile
Up arrow icon