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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

144215 Apr 23,2019 02:47 PM UTC Apr 29,2019 04:55 AM UTC Angular - EJ 2 5
loading
Tags: Grid
ttArbor
Asked On April 23, 2019 02:47 PM UTC

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 [Syncfusion]
Replied On April 24, 2019 04:59 AM UTC

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. 


ttArbor
Replied On April 24, 2019 02:02 PM UTC

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 [Syncfusion]
Replied On April 26, 2019 12:57 PM UTC

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 


ttArbor
Replied On April 26, 2019 01:45 PM UTC

works great! thank you

Hariharan J V [Syncfusion]
Replied On April 29, 2019 04:55 AM UTC

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 


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