Load the separate apis for parents and childres in Tree grid on angular 12

[Dileep]

Hi 

we have a below requirement . please share the sample code how to achieve this , we have implemented the remote data load but still it is not working. 

two apis will be there to fetch data : first api will load the parent list which contains the unique id 

second api will load the children when we pass the parentid to it . 

This above thing should be implemented in tree-grid and the each childeren api should be called on expand button click and also at parent level we should have the checkboxes in order to select . 

[Farveen Sulthana Thameeztheen Basha]

Hi Dileep,

If you want to bind parent/child records manually by sending post separately we suggest to use CustomBinding Concept of the TreeGrid. We can bind child records only on expanding parent records using this concept. Using the custom binding feature you can bind the child data for a parent record as per your custom logic. When a parent record is expanded, dataStateChange event is triggered in which you need to handle the child data in your service.

Refer to the code below:-

App.Component.html

<ejs-treegrid [dataSource]="tasks | async" hasChildMapping="isParent" parentIdMapping="ParentID" idMapping="id"   [editSettings]="editSettings"[toolbar]="toolbar" height="470" (dataStateChange)="dataStateChange($event)">

  <e-columns>

    <e-column field = "id" headerText="Task ID" width="120" textAlign="Right" isPrimaryKey="true" type="number"></e-column>

    .   .    .

> 

  </e-columns>

</ejs-treegrid>

 

App.Component.ts

 

public dataStateChange(state: DataStateChangeEventArgs) : void {

    if (state.requestType === 'expand') {

      /////    assigning the child data for the expanded record.

         state.childData = <any>childdata1;

         state.childDataBind();       //// to indicate that the child data is bound.

     } else {

        this.TaskService.execute(state);

     }

   }

Refer to the documentation link:-

https://ej2.syncfusion.com/angular/documentation/treegrid/observables/

https://ej2.syncfusion.com/angular/documentation/treegrid/observables/#handling-child-data

Please get back to us if you need any further assistance.

Regards,

Farveen sulthana T