1. Home
  2. Forum
  3. Angular - EJ 2
  4. Virtual Treeview with remote data

Virtual Treeview with remote data

Hi,

I try to make a server-side file/folder-browser with the treeview which shows files and folders on the server. The data (an array with files and folders) is coming from a webapi.

In the treeview when the user doubleclicks a folder-node a new call to the remote data service should be done and then the response (an array with files and folders) should be shown as childnode under that node. The same thing for the childnodes and their childnodes, etc.

Is this possible with the treeview and how?


5 Replies
AB Ashokkumar Balasubramanian Syncfusion Team July 20, 2018 03:45 PM UTC

Hi Sietse Wielenga, 
 
You can use the DataManager module to load the WebAPI adaptor data for TreeView component. Please check the below code block. 
 
[TS] 
 
public data: Object = new DataManager({ 
           url: "http://localhost:50272/api/TreeViewData/GetTreeData",  
           crossDomain: true,  
           adaptor: new WebApiAdaptor  
    }); 
  
public field:Object = { dataSource: this.data, id: 'id', parentID: 'parent_Id', text: 'text', hasChildren: 'leaf' };   
 
[HTML] 
 
<ejs-treeview id="remote" [fields]='fields'></ejs-treeview> 
 
To know more details about DataManager, please check the below help document. 
 
 
Please let us know, if the provided information’s are helpful to achieve your requirement or not. 
 
Regards, 
Ashokkumar B.  


SW Sietse Wielenga July 23, 2018 03:19 PM UTC

Hi,

Showing the first level in the treeview is not the problem, but after expanding a folder-node a new call to the webservice should be done for getting the content of that subfolder and show the response of that call as childnodes under the expanded node.
This is the code i've got so far.

explorer.component.html

<ejs-treeview id='tree' [fields]='fields' (nodeExpanding)='onNodeExpanding($event)'></ejs-treeview>


explorer.component.ts

    public fields: Object;

    ngOnInit() {

      let searchOptions: any = { files: true, folders: true, parentPath: null, mask: "*.*" ;
      this.dataService.Post("http://localhost:5555/api/utils/IOBrowser", searchOptions).subscribe((response: any) => {
            
            this.fields = {
              dataSource: response, id: 'fullPath', parentID: 'parentPath', text: 'name', hasChildren: 'isFolder', icon: 'type'
            };

      });
    }
    
    onNodeExpanding(args: NodeExpandEventArgs) {

      let searchOptions: any = { files: true, folders: true, parentPath: args.nodeData["id"], mask: "*.*" ;
      this.dataService.Post("http://localhost:5555/api/utils/IOBrowser", searchOptions).subscribe((response: any) => {
            
            // how to push the response as childnodes under the expanded node ???

      });          
    }    

AB Ashokkumar Balasubramanian Syncfusion Team July 24, 2018 12:02 PM UTC

Hi Sietse Wielenga, 
 
In our TreeView component remote data functionality works based on, when a parent node expands at that time it will send the request to server to get the corresponding child nodes. For this scenario, it’s doesn’t need to get the data manually from server side using nodeExpanding event. You can modify your controller data code block as generic way to resolve this problem. We have share the code block for this scenario, please check it. 
 
//List Initialization 
 
List<TreeViewData> m_templateData = new List<TreeViewData>(); 
 
//Add the data to List 
 
// if the node is root level parent, so don’t specify the parent id 
 
m_templateData.Add(new TreeViewData { id = 1,  name = "Local Disk(C:)", hasChild = true }); 
 m_templateData.Add(new TreeViewData { id = 2, pid = 1, name = "Folder 1" }); 
 m_templateData.Add(new TreeViewData { id = 3, pid = 1, name = "Folder 2" }); 
 m_templateData.Add(new TreeViewData { id = 4, pid = 1, name = "Folder 3", hasChild = true }); 
 
//WebAPI 
 
public IEnumerable<TreeViewData> GetTreeData() 
{ 
            var parentId=""; 
            // Validate if the node has parent or not 
            if (HttpContext.Current.Request["$filter"] != null) 
            { 
                 parentId = HttpContext.Current.Request["$filter"].Split(' ')[2]; 
            } 
            else 
            { 
                parentId = null; 
            } 
            TreeViewDataController obj = new TreeViewDataController(); 
            return obj.generateData(parentId); 
} 
 
public IEnumerable<TreeViewData> generateData(String parentId) 
{ 
            IEnumerable<TreeViewData> data; 
            if (parentId != null) 
            { 
                int searchPid = int.Parse(parentId.ToString()); 
                data = TemplateData.Where(t => t.pid == searchPid); 
            } 
            else 
            { 
                //Root Level parents 
                data = TemplateData.Where(t => t.pid == null); 
            } 
            return data; 
} 
 
 
[HTML] 
 
<ejs-treeview id="remote" [fields]='fields'></ejs-treeview> 
 
 
[TS] 
 
public data: Object = new DataManager({ 
          url: "http://localhost:50272/api/TreeViewData/GetTreeData", 
          crossDomain: true,  
          adaptor: new WebApiAdaptor  
    }); 
 
public fields: any= { dataSource: this.data, id: "id", text: "name", hasChildren: 'hasChild', parentID: "pid" } 
 
 
Please let us know, if the provided information’s are helpful to resolve your problem or not. 
 
Regards, 
Ashokkumar B. 


SW Sietse Wielenga July 25, 2018 08:16 AM UTC

Thank you very much for the reply, now it's clear to me.
For extracting the filter value, I've made a little improvement:

// $filter=parentPath eq 'abc def' should be extracted as: abc def

string filter = string.Join("", HttpContext.Current.Request["$filter"].Split(' ').Skip(2));
filter = filter.Substring(1, filter.Length - 2);


AB Ashokkumar Balasubramanian Syncfusion Team July 26, 2018 10:37 AM UTC

Hi Sietse Wielenga, 
 
Most welcome, please let us know if you need any assistance 
 
Regards, 
Ashokkumar B. 


Loader.
Up arrow icon