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.
Unfortunately, activation email could not send to your email. Please try again.

TreeView custom fields

Thread ID:

Created:

Updated:

Platform:

Replies:

130069 Apr 19,2017 09:28 AM May 1,2017 06:35 AM Angular 5
loading
Tags: ejTreeView
Agne
Asked On April 19, 2017 09:28 AM

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 [Syncfusion]
Replied On April 20, 2017 09:48 AM

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. 


Agne
Replied On April 25, 2017 04:07 AM

Hello,

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

Ashokkumar Balasubramanian [Syncfusion]
Replied On April 26, 2017 08:56 AM

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. 


Agne
Replied On April 28, 2017 10:55 AM

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 [Syncfusion]
Replied On May 1, 2017 06:35 AM

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;