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

Hierarchial data load on demand or dynamically

Thread ID:





143305 Mar 13,2019 10:44 AM UTC Mar 15,2019 08:08 AM UTC Angular 3
Tags: ejGrid
Samir Modi
Asked On March 13, 2019 10:44 AM UTC

I need to show a tree grid (initially all collapsed) and then when I click on a row, it should pull the data from api call at backend and bind it under the parent row. I searched through hierarcial binding inside Grid documentation using below url - 


I do not want to display columns again in child grid since these will be similar to parentGrid. How can i achieve this or using any other relevant control and also is this not supported if there are multiple levels, say 3 or more (Reference - https://www.syncfusion.com/forums/142396/hierarchy-data-source-binding-not-work-in-multipe-levels-3-or-more)

Thanks in advance!

Vignesh Natarajan [Syncfusion]
Replied On March 14, 2019 08:31 AM UTC

Hi Samir, 
Thanks for contacting Syncfusion support.  
Query: “I need to show a tree grid (initially all collapsed) and then when I click on a row, it should pull the data from api call at backend 
From your query, we understand that you need to render TreeGrid control with child data to be fetched from server on button click. From 2018 Volume 4 release we have given support for TreeGrid component. Kindly refer our UG documentation and online sample for your reference 
Please get back to us if you have further queries. 
Vignesh Natarajan, 

Samir Modi
Replied On March 14, 2019 12:09 PM UTC

Hi Vignesh, 

Thanks for your reply. I have implemented the same using the documention provided but I do not see expand icons on my rows even if "isParent" flag is true. Do we need to enable load on demand explicitly? 
[{    "id" : 1
"name": "Samir","lastName": "Modi","address": "India","isParent": true}]

<ejs-treegrid [dataSource]='treeData' [treeColumnIndex]='1' hasChildMapping='isParent' parentIdMapping='q' idMapping='id'>
       <e-column field='id' headerText='Id' ></e-column>
<e-column field='name' headerText='Name' ></e-column>
<e-column field='lastname' headerText='Last Name' ></e-column>
<e-column field='address' headerText='Address' ></e-column>

Vignesh Natarajan [Syncfusion]
Replied On March 15, 2019 08:08 AM UTC

Hi Samir, 

Thanks for the update. 

Query : I do not see expand icons on my rows even if "isParent" flag is true. 
We have validated the reported issue and we are not able to reproduce the mentioned issue on our side. The expand icon is rendered for the parent record which has the hasChildMapping attribute as true in the datasource. We have prepared a sample for your reference. Please refer the below link for the sample. 

Note :  In the above provided sample two applications will be available. Please run the MVC project for the api service and then run the angular application.  

Please share the following details if you still face the issue. 

  1. Share the code example of Treegrid from code behind.
  2. Share the type of adaptor that you are using.
  3. If possible please try to reproduce the issue in the attached sample.

Vignesh Natarajan. 


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