Generate treeView from remote data

Question

Hello,I am trying to generate treeview using remote data. I am using my own WebAPI.I am doing it like:ejs-treeview>var dataManager = new DataManager({url: urlPath, adaptor: new UrlAdaptor(),headers: [{ Authorization: 'Bearer ' + JSON.parse(localStorage.getItem('currentUser')).authToken }]});this.fields = { dataSource: dataManager, id: 'id', parentID: 'parent_Id', text: 'text', hasChildren: 'leaf' };I am getting response from WebAPI like (Picture attached)This TreeView should render like one main node and 8 child nodes, but I am getting all 9 like main nodes and after expanding first node, I can see one more time all 9 nodes. It looks somethins like:> Menu Node1 Node2 Node3After Expanding it look like:> Menu > Menu   Node1   Node2   Node3 Node1 Node2 Node3What am I doing wrong?Also there will be treeview with more than one level, how it should be done to avoid these problems? Maybe I should convert my data to local data after getting it from WebAPI?Attachment: Capture_faea9b8e.zip

Piramanayagam Ramakrishnan · Answer

Hi AC, 
 
Sorry for the inconvenience. 
 
We have checked your query. You can use the own Web API adaptor in TreeView component. Unfortunately, TreeView is not rendering properly when you return entire data (including child nodes) on initial request. We have confirmed this as a defect and logged an issue report for this. Fix for this issue is estimated to be available by upcoming patch release. 
 
As a workaround, you can fetch entire data source from Web API and assign this to TreeView by using DataManager. Please refer to the below code example. 
 




[ts] 
 
@ViewChild('tree') 
public tree: TreeViewComponent 
   
public data: { [key: string]: Object }[] = []; 
   
public dataManager: any = new DataManager({ 
    //assign your Web API service URL here 
    url: 'http://localhost:64599/api/TreeViewData/GetAllData', 
    adaptor: new UrlAdaptor, 
    crossDomain: true, 
    headers: [{ Authorization: 'Bearer ' + JSON.parse(localStorage.getItem('currentUser')).authToken }] 
}).executeQuery(new Query()).then((e: any) => { 
    //assign the returned data to TreeView data source 
    this.tree.fields.dataSource = e.result as { [key: string]: Object }[]; 
}); 
 
public field:Object = { dataSource: this.data, id: 'id', parentID: 'parent_Id', text: 'text', hasChildren: 'leaf' };  
 
 
You can refer to the following common user guide for Angular to know more about getting started with our components. Under each component, we have explained its features. 
 
https://ej2.syncfusion.com/16.1.37/angular/documentation/treeview/getting-started.html 
 
Please let us know whether the provided information is helpful in achieving your requirement. If not revert with more information to proceed further. 
 
Regards, 
Piramanayagam R

Unknown · Answer

Hello,thant you, it works perfectly!One more question about treeview - it there a possibility to set font weigth to bold for some nodes ir treeView? In first version I was using property htmlAttribute, but now I was unable to do same thing with htmlAttributes property. I can get data from WebAPI as boolean type to set as bold or non bold for node or string.

Piramanayagam Ramakrishnan · Answer

Hi AC, Thanks for your update. The htmlAttributes property is used to define the HTML attributes such as class, style, etc., for the specific TreeView node. Please refer to the below code example. [ts] public nodeAttr: { [key: string]: string } = {'class': 'firstnode', 'style': 'background: red'}; // Data source for TreeView component public countries: Object[] = [ { id: 1, name: 'Australia', hasChild: true, expanded: true }, { id: 2, pid: 1, name: 'New South Wales' }, { id: 3, pid: 1, name: 'Victoria' }, { id: 4, pid: 1, name: 'South Australia' }, { id: 6, pid: 1, name: 'Western Australia' }, { id: 7, name: 'Brazil', hasChild: true, htmlAttr: this.nodeAttr }, { id: 8, pid: 7, name: 'Paraná' } ]; public field:Object ={ dataSource: this.countries, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild', htmlAttributes: 'htmlAttr' }; For your reference, we have prepared a sample based on this in the link: https://plnkr.co/edit/oMxqKuackdQXjEzurfqK?p=preview To achieve your requirement, set font weight to bold for some nodes with data as Boolean type, you can use the drawNode event. You can customize the specific TreeView nodes by adding class to it. Please refer to the below code example. [html] [ts] public onDrawNode(args: DrawNodeEventArgs) { //check the returned Boolean data type of data from Web API for specific node //ex: we have returned the "isBold" data in data source if (args.nodeData["isBold"]) { args.node.classList.add("text-bold"); } } [css] .e-treeview .text-bold > .e-text-content .e-list-text { font-weight: bold; } For your reference, we have prepared a sample based on this in the link: https://plnkr.co/edit/TFvrrgEQ9jbR3phMwsrz?p=preview Note: the above samples are prepared with local data source to showcase the picturized output. Please let us know whether the provided sample is helpful in achieving your requirement. If not revert with more information to proceed further. Regards, Piramanayagam R

Piramanayagam Ramakrishnan · Answer

Hi AC, 
 
Thanks for your patience. 
 
We have included the fix in our updated online npm packages for ej2-navigations (16.1.38), so you can update the npm packages to resolve your reported issue (TreeView is not rendering properly when you return entire data (including child nodes) on initial request). 
 
 
Also, you need to add the offline property in DataManager. This will prevent the request while expand the parent node (when child nodes are return on initial request). Please refer to the below code example. 
 




[ts] 
 
public dataManager: any = new DataManager({ 
    url: 'http://localhost:64599/api/TreeViewData/GetAllData', 
    adaptor: new UrlAdaptor, 
    crossDomain: true, 
    offline: true, 
    headers: [{ Authorization: 'Bearer ' + JSON.parse(localStorage.getItem('currentUser')).authToken }] 
}).executeQuery(new Query()).then((e: any) => {  
    //assign the returned data to TreeView data source  
    this.tree.fields.dataSource = e.result as { [key: string]: Object }[];  
}); 
 
 
Please let us know if you need further assistance on this. 
 
Regards, 
Piramanayagam R