Two way data binding in treeview - Need to update tree on the basis of change in datasource

[Rohit Swarup]

Hi Team,

We are using treeview in our application.

Our requirement is that, at first we load 100 nodes of the tree. On click of a button(say 'load more'), we get data from backend and then we need to update our datasource. On updation, this should also get reflected on the tree.

Is this possible with the treeview?

[Shalini Maragathavel]

Hi Rohit,   

  

Greeting from Syncfusion support.  

  

Based on your query, we suspect that you need to update the data to the TreeView component on button click. You can achieve your requirement using field property of TreeView component as demonstrated in the below code snippet,  

   

App.component.html 

  <button id="button" (click)="addclick($event)">LOAD MORE</button> 

      <ejs-treeview 

        #treeviewComponent 

        id="default" 

        [fields]="field" 

      ></ejs-treeview>  

-------------------------------------- 

App.component.ts 

export class AppComponent { 

  public hierarchicalData: Object[] = [ 

  . . . 

  ]; 

  // Mapping TreeView fields property with data source properties 

  public field: Object = { 

    dataSource: this.hierarchicalData.slice(0, 3), 

    id: "id", 

    text: "name", 

    child: "subChild" 

  }; 

  addclick() { 

(this.treeviewComponent.fields as any) = { 

      dataSource: this.hierarchicalData, 

      id: "id", 

      text: "name", 

      child: "subChild" 

    };  } 

} 

  

For your convenience, we have prepared sample with local data to set data on button click. Similarly you can fetch data from the backend and assign that to the dataSource field. 

  

Sample: https://stackblitz.com/edit/angular-7cwmmw-vdgcp1?file=app.component.ts 

 Please, refer to the below links for more information on TreeView component.  

  

UG Documentation- https://ej2.syncfusion.com/angular/documentation/treeview/getting-started/  

  

Demo link: https://ej2.syncfusion.com/angular/demos/#/material/treeview/default 

  

API reference: https://ej2.syncfusion.com/angular/documentation/api/treeview/#fields 

  

Please let us know, if you need any further assistance.  

  

Regards,   

Shalini M. 

[Rohit Swarup]

Hi, 

Thanks for the quick solution.

But we have a concern here, The data to be loaded on click of 'Load More' comes dynamically via API which should be added to existing data source.

This way, we need to push data to the tree rather than showing less data at first.

[Shalini Maragathavel]

Hi Rohit, 

Thanks for the update. 

Based on your query, we suspect that you need to dynamically add the nodes to the TreeView component using an external button click. You can achieve your requirement using addNodes method of TreeView component as demonstrated in the below code snippet, 

export class DefaultTreeViewComponent { 

  public onClick() { 

      let item: { [key: string]: Object } = { 

      id: this.count + "parent", 

      name: "New Folder" + this.count, 

      hasChildren: true, 

      subChild: [{ id: this.count + "child", name: "Folder" + this.count }] 

    }; 

    this.tree.addNodes([item], this.tree.selectedNodes[0]); 

    ++this.count; 

  } 

} 

Similar to the above code, you can add the data’s fetched from the API to the existing datasource using addNodes method.

Please find the below sample for your reference. 

Sample: https://stackblitz.com/edit/angular-k2bazk-6yclfc?file=default.component.ts

API Link: https://ej2.syncfusion.com/angular/documentation/api/treeview/#addnodes 

Please let us know if you need any further assistance. 

Regards, 

Shalini M 

[Rohit Swarup]

Thank you for the solution.

[Keerthana Rajendran]

Hi Rohit, 

Most welcome. We are happy to hear that the solution helped you. Please get back to us if you need further assistance.  

Regards, 

Keerthana.