CODEWITHSUNDEEP
javascriptjquerytreeview
jatanp
jatanp

Reputation: 4092

How to trigger rendering of JQuery treeview

I use jquery tree plugin 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

Upvotes: 0

Views: 5524

Answers (2)

Norleb
Norleb

Reputation: 1

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..

Upvotes: 0

jatanp
jatanp

Reputation: 4092

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

Upvotes: 1

Related Questions