Reputation: 434
I am loading the dynatree programitically when the page loads as follows
function loadTree(data)
{
var rootNode = $("#tree").dynatree("getRoot");
$.each(data, function () {
var childNode = rootNode.addChild({
title: this.agent_code + ' - ' + this.holder_name,
tooltip: this.holder_name,
isFolder: true,
key:this.agent_code,
});
});
}
Now after i retrieve new data from the server and wants to load with new nodes it does not remove the old node.
function reload(data)
{
$("#tree").dynatree("getRoot").visit(function(node){
node.remove();
});
loadTree(data)
}
The above code removes only a single node. What am i missing here. Thanks in advance
UPDATE i tried with a workaround through the following code
function reload(data)
{
$("#tree").remove();
$('#test').html('<div id="tree"></div>');
$('#tree').dynatree(); //reinitialize the tree
loadTree(data);
}
It does reload but then cannot populate the child nodes through lazyloading
Upvotes: 0
Views: 1899
Reputation: 434
Finally I have it working. I changed the code with this line
function reload(data)
{
//get all the available parent nodes
var n = [];
$("#tree").dynatree("getRoot").visit(function(node){
n.push(node.data.key);
});
//delete each node one by one
var tree = $("#tree").dynatree("getTree");
$.each(n,function(index,value){
var Cnode = tree.getNodeByKey(value);
if(Cnode != null) Cnode.remove();
});
loadTree(data);
}
Am pretty sure this isn't the best of solution. So if anyone has better way of doing it, please post another answer.
Upvotes: 0
Reputation: 27986
This will remove all the nodes that you have added during the initial load:
$("#tree").dynatree("getRoot").removeChildren();
Upvotes: 1