How to trigger rendering of JQuery treeview

Question

Hi,

I use Jquery tree plugin (http://docs.jquery.com/Plugins/Treeview) to render hierarchical data. I have coded additional functions which would allow user to interact with this data (like adding/deleting nodes, swapping nodes, etc...)

Currently this plugin supports that whenever you want to add any node, you can call following method,

$("#browser").treeview({ add: branches });

here "branches" is JQuery object created with the HTML block, which would represent a particular node.

However, for delete and swapping of nodes, I use common JQuery functions like,

for delete, $("#topnd2").remove();

for swapping,

var next = $("#topnd2").next(); $("#topnd2").insertAfter(next);

"topnd2" is an id of any particular tree node.

The nodes get deleted / swapped properly but the problem is the tree does not get rendered and therefore the tree images (mainly vertical lines denoting branches) are not set properly.

For example, if I delete the last node then that node will be removed from rendered treeview but the remaining sibling node should get L as branch line image but not | .

I tried calling

$("#browser").treeview();

Please let me know your ideas.

Thanks, Jatan

Answer 1

I found some workaround as given below,

Once the node is swapped up, virtually add its previous node to its child,

$("#browser").treeview({add:$("#topnd2").insertBefore(previous).next()});

If node is swapped down, virtuall add the current node to its next node.

$("#browser").treeview({add:$("#topnd2").insertAfter(next)});

currently it's working fine, will update this post, if I find any problems in this approach. Also please validate this approach if you know.

Regards, Jatan

Answer 2

Above answer works great!

Answer 3

If you try to refresh the treeview again after node removal, the link will work but not the [+] or [-] icon. Tried this on several browsers..