Using UrlAdaptor in Treeview with custom URL scheme

Question

Hi,I have successfully populated the Treeview with a UrlAdaptor using a fields definition like this:const fields = { dataSource: dataMgr, id: 'id', text: 'text', parentID:'parentID', query: new Query() };On the server, my service parses the query that includes a the ParentID and a value for the selected node - I assume this is added automatically by the Treeview control. My question is: How can I modify the Url prior to sending on the expand - or include an additional Predicate that is sent to the server - for example, I not only need to service to query on the ParentId but also some other value that my database will use for its query - e.g. an Account Status. Ideally I would like to use JsonData and populate the treeview with my own data whenever a Node is expanded - is this possible?Many thanks

Muthukrishnan Kandasamy · Answer

Hi Sharad, 
 
Thanks for contacting Syncfusion support. 
 
We have checked your query in TreeView component. You can customize the Query using predicate option. Refer to the below documentation link for to know more about Query. 
 
https://ej2.syncfusion.com/react/documentation/data/querying/ 

Refer the below code block. 
 




  


We have prepared sample for your convenience, please refer to the below link for the sample. 
 
https://stackblitz.com/edit/treeview-urladaptor?file=index.js 

Please let us know, if you need any assistance. 
 
Regards, 
Muthukrishnan K

Sharad Patel · Answer

Hi,Thank you for the quick response. Part of my question is unanswered though. How can I modify the Query on the onExpand event or supply my own data to populate the nodes within the onExpand e.g. using the JsonAdaptor ?

Sowmiya Padmanaban · Answer

Hi Sharad, 
 
We have checked your reported query. We suspect that your requirement is to add your own data during nodeExpanding() event.  
 
For your reference, we have prepared a sample. In that sample, we have added the local data to the TreeView component using addNodes() method during nodeExpanding() event. 
 
You can use the same approach to fetch the child data from your JSON adaptor and add the data using addNodes() method. 
 
Refer the below code snippet. 





  <TreeViewComponent fields={this.fields} ref={(scope) => { this.treeObj = scope; }}  nodeExpanding={this.nodeExpanding.bind(this)}/> 
 nodeExpanding(args) { 
      if(args.isInteracted){ 
        this.treeObj.addNodes(this.localData2, args.nodeData.id); 
      } 
    } 

Refer the below sample link. 
https://stackblitz.com/edit/react-a6ms9e?file=index.js 
 
To know more about the TreeView component. Refer the below link. 
 
Documentation link –https://ej2.syncfusion.com/react/documentation/treeview/how-to/process-the-tree-node-operations-using-context-menu/ 
 
Demo link –https://ej2.syncfusion.com/react/demos/#/material/treeview/default 
 
API Reference - https://ej2.syncfusion.com/react/documentation/api/treeview/#addnodes 
 
Please let us know, if you need any further assistance. 
 
 
Regards,  
Sowmiya.P

Sharad Patel · Answer

Hi,Your example works but expanding and closing the node adds the child nodes repeatedly - you can test this the example you provided. Is there a way to prevent this? I tried using nodeCollapsed and then removing child nodes but could not find a way to retrieve the ids of the child nodes. Thanks.UPDATE========I have solved this by first removing the childnodes before adding nodes. I had to get the treedata and then filter over the parentID - this is okay for a smallish dataset but is there a method to just get the childnodes of the treenode?

Sowmiya Padmanaban · Answer

Hi Sharad,  
 
Sorry for the Inconvenience. 
 
We have checked your query and reported problem with the sample provided. We assume that, you are expecting to add the child node data only while expanding nodes using nodeExpanding event without binding child nodes for any tree node with initial data source. In this case, add child nodes to a parent node only when it does not possess child nodes, already. 
 
Below condition checks whether the child node data are already present or not.

nodeExpanding(args) {
        // Check the condition if child node are already present or not.
        if(args.isInteracted && args.node.querySelector('li') === null){ 
          this.treeObj.addNodes(this.localData2, args.nodeData.id);
        }
      }

Use the above mentioned solution, to avoid removing the child node in nodeCollapsed event. Sample
link: https://stackblitz.com/edit/react-a6ms9e-241j1t?file=index.js
 
Please let us know, if you have any concerns. 
 
Regards,  
Sowmiya.P

Sharad Patel · Answer

Thank you for the quick response. Yes - this works for me! Please close this ticket.

Shameer Ali Baig Sulaiman Ali Baig · Answer

Hi Sharad, 
 
We are happy to hear that your issue has been resolved. Please contact us if you need any help from us. We will be happy to help you. 
 
Regards, 
Shameer Ali Baig S.