Force reload a node

Question

Is there a way to force an already expanded tree node to fetch data from the server and refresh its children? I've tried refreshNode but this does not seem to work.

Sowmiya Padmanaban · Accepted Answer

Hi Hosney,  
 
Greetings from Syncfusion support. 
 
We have checked you requirement with TreeView component. RefreshNode method is used to reload the current node with updated data. It doesn’t re-render the child nodes. This is the default behaviour. 
 
If you want to change the child nodes of corresponding parent, we suggest you to use the addNodes and removeNodes method of TreeView component. 
 
Please, refer the below code snippet. 
 




document.getElementById("add").onclick = () => { 
  let obj = { 
    id: "89", 
    name: "New Node", 
    child: null 
  }; 
  // Add the node to the TreeView component. 
  treeObj.addNodes([obj], "01-02"); 
}; 
document.getElementById("remove").onclick = () => { 
  // Remove the node to the TreeView component. 
  treeObj.removeNodes(["01-02-02"]); 
}; 

 
Please, refer the sample link. 
 
https://stackblitz.com/edit/ajxzjy-44kes9?file=index.ts 
 
Please, refer to the below link to know more about the TreeView component. 
 
UG Documentation: https://ej2.syncfusion.com/documentation/treeview/getting-started/ 
 
Demo link: https://ej2.syncfusion.com/demos/#/material/treeview/default.html 
 
API Reference: https://ej2.syncfusion.com/documentation/api/treeview/ 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P

Hosney · Answer

Thanks for that. This is how I've achieved the functionality (uses jquery):

ej.navigations.TreeView.prototype.refreshNodeChildren = function (id) {

const node = this.getElement(id);

if (this.expandedNodes.some(n => n === id)) {

if (node) {

$(node).find("ul").remove();

this.renderChildNodes(node);

}

} else {

let $textContent = $(node).find(".e-text-content:first");

if (!$textContent.find(".e-icons").length) {

$textContent.prepend("<div class='e-icons e-icon-expandable'></div>");

}

this.expandAll([id]);

}

};

"); } this.expandAll([id]); }};

Keerthana Rajendran · Answer

Hi Hosney, 
 
Most Welcome. 
 
We are glad that your issue has been resolved. Please get back to us if you require any further assistance. 
 
Regards, 
Keerthana.