Remotedata on every expand node

Question

Hi,
how can I call a "Demo" controller method via remotedata (example "DataSource(da => da.Url("Demo").Adaptor("UrlAdaptor")") every time the node is expanded, to populate it? And not just the first time like with the "OnDemand" property.

Best Regards,
Massimo

Kanagambigai Murugan · Answer

Hi Massimo, 

Thanks for contacting Syncfusion support. 

Based on your query we understand that you want to send request to the server while expanding the TreeView node each time. But, the TreeView will be rendered based on “loadOnDemand” by default in order to improve the performance when consuming huge datasource. After the child nodes are rendered and when we are expanding the same parent node again, the request will not be sent to the server again.  

For more information, please refer to our documentation 
https://ej2.syncfusion.com/aspnetcore/documentation/treeview/data-binding/ 

So, could you please share the exact use case scenario for which you need to send request to the server while expanding the parent node every time so that we can check and proceed further. 

Regards, 
Kanagambigai

Massimo · Answer

Hi,

Kanagambigai,Thanks for response, yes I understand how you mean the "LoadOnDemand" and for another function I need to write it is fine.The problem is that in this function I have a list of dynamic elements, not static, that can change even 1sec after creating it, they are the list of records associated to the parent record. For this I need to create a method to refresh the node, a method that must be triggered even when the node is expanded. The records will never be many, so there are no performance problems. Otherwise I have to reload the whole list of all elements every time, but in this case I have to keep in memory the state of all open and closed nodes.It would be useful to have like a "LoadOnDemand=Always" property that calls the method at every load.I hope I have explained myself.Regards,Massimo

Kanagambigai Murugan · Answer

Hi Massimo, 

Thanks for the update. 

You can achieve this requirement (send request to server whenever the node is expanded) using the NodeExpanding event of the TreeView. While expanding the node, you can add the child nodes returned from the requested URL using nodeExpanding event of the TreeView.  





  function onNodeExpanding(args) { 
          if ((args.node.querySelectorAll(".e-icons.e-icon-expandable").length > 0)) { 
            xmlRequest(args.node, args.node.getAttribute("data-uid")); 
          } 
      } 
    function xmlRequest(currentTarget, parentID) { 
      var request = new XMLHttpRequest(); 
      request.open('POST', '/api/SampleData?id=' + parentID, true); 
      var proxy = document.getElementById('treeview').ej2_instances[0]; 
      var parent = currentTarget; 
      request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); 
      request.onload = function () { 
        if (request.status >= 200 && request.status < 400) { 
          // Success! 
          var resp = request.responseText; 
          proxy.addNodes(JSON.parse(resp), parent); 
 
        } else { 
        } 
      }; 
 
      request.onerror = function () { 
      }; 
      request.send(); 
    } 

For more information you can refer this https://www.syncfusion.com/kb/10330/how-to-load-nodes-when-expanding-the-parent-node 
 
API: https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Navigations.TreeView.html#Syncfusion_EJ2_Navigations_TreeView_NodeExpanding 

Kindly check with the provided details and let us know if you need any further assistance. 

Regards, 
Kanagambigai M

Massimo · Answer

This is exactly what I was looking for, thank you.

I need to delete all the elements of the parent node before loading the new ones though. I've searched the various docs and forums but haven't found anything.

I've read that with ".removeNodes" I can delete the current node, but how can I delete all the child elements of a node without deleting the node itself?

Regards,
Massimo

Keerthana Rajendran · Answer

Hi Massimo, 
 
Most welcome. 
 
To delete all the child nodes of a parent node, you can use removeNodes method. Through the nodeExpanded event, you can get the child nodes of a parent node after expanding, and here you can pass the array of node details to be removed. 
 




nodeExpanded: function (args) { 
    //Pass the child nodes details here to remove 
    this.removeNodes(['01-03-01', '01-03-02', '01-03-03']); 
  } 
 
You can fetch the node details with event args and pass the required node details in the removeNodes method to achieve your scenario. 
 
API links: https://ej2.syncfusion.com/documentation/api/treeview/#removenodes 
                 https://ej2.syncfusion.com/documentation/api/treeview/#nodeexpanded 
 
Regards, 
Keerthana R

Massimo · Answer

OK, thanks.Regards,Massimo

Keerthana Rajendran · Answer

Hi Massimo, 

Most welcome. Please get back to us if you need any further information. 

Regards, 
Keerthana R.