data is not working while getting it from backend

[RakhiS]

Hi,

I am using https://ej2.syncfusion.com/angular/documentation/treeview/data-binding/#self-referential-data to show the  referential data. 

but the localdata is coming from backend from my sql query using "for json auto".

(Select Id as id, ParentId as pid, GroupName as text, 0 as hasChild from AccountingGroups  for json auto)

 Can you please help me and let me know how I can bind this data for treeview.

[Sowmiya Padmanaban]

Hi RakhiS,  

 

Greetings from Syncfusion support. 

 

We have checked your requirement with TreeView component. After fetching the JSON data from backend, we need to re-define the TreeView fields property dynamically for updating the datasource of the TreeView component. 

 

For your reference, we have prepared a simple sample, in which we have rendered the TreeView with empty data source, initially. And, then we dynamically update the data source of TreeView in external button click (similarly, you can update the data source of TreeView dynamically after fetching data from server side). 

 

Refer the below code snippet. 

 

 <button id="button" (click)="click($event)">Load Datasource</button> 

  click(args) {    

      $.ajax({ 

        // Send the request to the controller side to fetch the TreeView datasource 

        url: "https://localhost:44356/Home/Update", 

        type: "POST",     

        dataType: "json", 

        success: function(result) { 

          var tree = document.getElementById("default").ej2_instances[0]; 

          // Update the datasource aftetr fetching the data from controller side. 

        tree.fields ={ dataSource: result,id: "id", parentID: "pid",  text: "groupname", hasChildren: "hasChild"} 

        }, 

        error: function(xhr, status) { 

          console.log(status); 

        } 

      }); 

    } 

 

 

Check out the sample and server application links below. 

 

Sample link: https://stackblitz.com/edit/angular-o8v8xc-penhi8?file=app.component.ts 

 

Service application from which we fetch the TreeView data for the above sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication769751485.zip 

 

Refer the below link to know more about the 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/ 

 

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

 

Regards,  

Sowmiya.P 

[RakhiS]

Thanks, I came to know my error and I already resolved. Thanks for your response

[Shameer Ali Baig Sulaiman Ali Baig]

Hi RakhiS, 

 

We are happy to hear that your reported problem solved. Get back to us if you need any further assistance. We will be happy to assist you. 

 

Regards, 

Shameer Ali Baig S.