TreeView custom fields

[Agne]

Hello,

is there a possibility to add custom fields while creating TreeView?

For example, my TreeView looks like this:

myTreeView = { dataSource: dataManager, id: 'id', parentid: 'parentId', text: 'text', expanded: 'expanded' }

I want to add additional custom field:

myTreeView = { dataSource: dataManager, id: 'id', parentid: 'parentId', text: 'text', expanded: 'expanded', customfield: 'customField' }

This custom field will be used only to join some components together or sth like that, it do not need to show anything in UI, data is getting from Web API and field is string type.

[Ashokkumar Balasubramanian]

Hi Agne, 

We can able to add the custom field for treeview component. But currently, we don’t have an option to get the treeview data by using WEB API Data Source. So, you can bind the local data to achieve your requirement. Please check the below code snippet. 

[HTML] 

<ej-treeview [fields]="fields"></ej-treeview> 

[Script] 

//data binding 

         this.localData = [ 

                   { id: 1, name: 'Local Disk(C:)', hasChild: true, customField:"Custom-Info" }, 

                   { id: 2, pid: 1, name: 'Folder 1' }, 

                   { id: 3, pid: 1, name: 'Folder 2' }]; 

    this.fields = { id: 'id', parentId: 'pid', text: 'name', hasChild: 'hasChild', dataSource: this.localData}; 

//Get the custom field for Treeview component  

     var treeObj = $("#tree1").data("ejTreeView"); 

     var node = treeObj.getTreeData(“1”); //get the given node object 

     alert("The Customfield of node '" + node[0].name + "' is: '" + node[0].customField + "'"); 

 

To know more details about getTreeData method, please check the below API document. 

https://help.syncfusion.com/api/js/ejtreeview#methods:gettreedata 

Please let us know, if you have any further assistance on this. 

Regards, 

Ashokkumar B. 

[Agne]

Hello,

Is there a way to take data from WebAPI, put it into localData and make it work with loadOnDemand property?

[Ashokkumar Balasubramanian]

Hi Agne,  

 

You can use the ejDataManager to get the WebAPI data and convert into Local Data.Also you can able to bind this local data to treeview component with loadOnDemand property. please find the below code snippet. 

 

[HTML] 

 

<div id="treeview"> </div> 

 

[Script] 

 

//Configure the DataManager 

       var dataManager =new ej.DataManager({ 

 

                url: "WebAPI Url", 

 

                crossDomain: true, 

 

                adaptor: new ej.WebApiAdaptor() 

 

            }); 

 

// Query to fetch data from WebAPI. 

 

var query=new ej.Query().select(["expanded", "hasChild", "id","name","pid"]).from("TreeViewData").take(5); 

            var queryPromise = dataManager.executeQuery(query); 

 

// Convert the WebAPI data into local data 

queryPromise.done(function(e){ 

            var retriveData = (e.xhr && e.xhr.responseJSON && e.xhr.responseJSON.d) ? e.xhr.responseJSON.d : (e.result ? e.result : []);           

                                                 

       $("#treeview").ejTreeView({ 

               loadOnDemand:true, //Bind the data and LoadOnDemand property for treeview  

               fields: { 

                  // Assign data source and mapping the data source fields. 

                            dataSource: retriveData, id: "id", text: "name", parentId: “pid",expanded:"expanded",hasChild:"hasChild" 

                          } 

         }); 

}); 

 

 

 

To know more details about ejDataManager, please refer the below help document. 

 

https://help.syncfusion.com/api/js/ejdatamanager 

 

Please let us know, if you have any other concerns. 

 

Regards, 

Ashokkumar B. 

[Agne]

Hello again,

I am trying to use this method, but I have problems.

Instead of this:
$("#treeview").ejTreeView({loadOnDemand: true});
var dataManager = new ej.DataManager({ url: GlobalVariable.BASE_API_URL + "menu/GetMenuPost", crossDomain: true, adaptor: new ej.UrlAdaptor() })
this.fields = { dataSource: dataManager, id: 'id', parentId: 'parentId', text: 'text', hasChild: 'leaf', expanded: 'expanded' }

I am trying to use this like in your example:
var dataManager = new ej.DataManager({ url: GlobalVariable.BASE_API_URL + "menu/GetMenuPost", crossDomain: true, adaptor: new ej.UrlAdaptor() })
var query = new ej.Query();
var queryPromise = dataManager.executeQuery(query);
queryPromise.done(function(e){
     var retriveData = (e.xhr && e.xhr.responseJSON && e.xhr.responseJSON.d) ? e.xhr.responseJSON.d : (e.result ? e.result : []);
     $("#treeview").ejTreeView({
          loadOnDemand: true,
          fields = { dataSource: dataManager, id: 'id', parentId: 'parentId', text: 'text', hasChild: 'leaf', expanded: 'expanded', customField: 'customField' }
     });
})

Like earlier, I am getting in response from WebAPI, that my firs node has child:

But the first treeView node do not have arrow (and are not expanded), so I can not expand and load other menu nodes:


Is it wrong somewhere in my frontend code, or I need to look for the problem in my Web API method?

[Karthik Ravichandran]

Hi Agne, 

 

Thanks for your update. 

 

We have checked your query with your provided code. We suspect that, in the provided code you have mapped the parentID filed name with parentId but in the attached screenshot, field name was differed as parent_Id. Please refer the attached screenshot. 

 

 

 

 

 

So please change the mapped field name properly. If you still facing the same issue, please provide the sample to reproduce the issue in our side. This will help us to provide the solution at earliest. 

 

Regards, 

Karthik R