Hierarchial data load on demand or dynamically

[Samir Modi]

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 - 

https://ej2.syncfusion.com/angular/documentation/grid/hierarchy-grid/?no-cache=1#dynamically-load-child-grid-data

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]

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 

 

UG: https://ej2.syncfusion.com/angular/documentation/treegrid/data-binding/?no-cache=1#remote-data  

 

Demo: https://ej2.syncfusion.com/angular/demos/#/material/treegrid/remotedata  

 

Please get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan, 

[Samir Modi]

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-columns>

       <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>

</e-columns>

</ejs-treegrid>

[Vignesh Natarajan]

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. 

Sample : http://www.syncfusion.com/downloads/support/forum/143305/ze/F1433051564354201  

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.

Regards, 

Vignesh Natarajan.