We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

TreeView custom fields

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.

5 Replies

AB Ashokkumar Balasubramanian Syncfusion Team April 20, 2017 01:48 PM UTC

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. 


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

Regards, 
Ashokkumar B. 



AG Agne April 25, 2017 08:07 AM UTC

Hello,

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


AB Ashokkumar Balasubramanian Syncfusion Team April 26, 2017 12:56 PM UTC

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. 
 
 
Please let us know, if you have any other concerns. 
 
Regards, 
Ashokkumar B. 



AG Agne April 28, 2017 02:55 PM UTC

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?





KR Karthik Ravichandran Syncfusion Team May 1, 2017 10:35 AM UTC

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 


Loader.
Live Chat Icon For mobile
Up arrow icon