How to trigger rendering of JQuery treeview - javascript

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

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

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

Related

Child Node attributes changes after store.put in IE8 only

I am using dojo 1.9.
Functionality:
I am populating data in observable dgrid store based on continuous polling call.
There is a functionality of expansion of row, in which some data( termed as child node) is appended to node created after of store.put().
We are creating this child node on click on "+" sign button used for expansion and store that in one global variable for JS.
eg. this.childNode[var1] = tempNode;
After every polling call we populate main row using store.put(mainRow).
Then we fetch mainNode =>mainNode = dom.byId(mainRow).
After fetching mainNode we append child node if that row is expanded. => mainNode.appendChild(this.childNode[var1]); where var1 is parameter.
In all browsers this functinality is working fine. Only in case of Internet Explorer 8 after store.put attributes of child Node like innerHTML/childnodes get blank which is breaking expansion in case of polling call.
Please let me know in case anyone has come across this issue. Also please suggest some solution/approach for this issue?
Seems like IE8 did not have native capability to handle the code. I have added http://modernizr.com/ JS library and got this to work.

Kendo TreeView: Can you edit a single dataitem without full tree update?

I'm currently running with kendo v2012.3.1315 and I am trying to edit a specific node in a tree view without a full tree view update.
I would like to be able to edit the name and have it reflect on the tree and any access to dataitem. Right now, I have been able to just overwrite the html but a) this could change due to template changes and b) when i access the dataitem later, it still has the old text.
The reasoning for this desired functionality is two fold: performance and consistent user interface.
Does anyone know if this is possible?
Thanks.
Find the element in the tree and update its .html() to the same value it would have if you would redraw the tree.

How to dynamically add and remove elements at same time in iScroll4?

I have been using iScroll4 for my work from quiet a time
Though I am facing an issue using it for a case where along with dynamic addition of elements at one end I also need to remove elements from other end. As in my work I might have to add a lot of data (which holds images) dynamically but I want to maintain same number of child elements in order to manage the memory/performance issue.
It would of great help if any one can suggest me any approach to do it.
You need to add or delete the elements from particular container using jquery.
And while adding and deleting the contents, you need to refresh the iScroll.
Say for example you create an iscroll as,
var myScroll = new iScroll('scrollwrapper', { });
Then after ever addition or deletion of scrollwrapper contents, refresh the iScroll, so as to work it properly.
myScroll.refresh();

Why does "appendChild" moves a node?

I'm playing around with native javascript. I'm basically practicing basic node manipulations such -- add, remove, move, copy, and create.
While testing move, I got a question.
http://jsfiddle.net/sJg7E/
if you look at the jsfiddle above, I've used "appendChild". How come it moves a node to a new div? I know that I need to clone a node if I want to copy a node. It just doesn't look/sound right with "appendChild" command.
Is this expected behavior?
A node can only have one parent. Therefore it moves it if you appends it to another node.
From documentation of appendChild:
Adds a node to the end of the list of children of a specified parent
node. If the node already exists it is removed from current parent
node, then added to new parent node.
From the same page:
You can use cloneNode to make a copy of the node before appending it
under the new parent. (Note that the copies made with cloneNode will
not be automatically kept in sync.)
Also note:
This method is not allowed to move nodes between different documents.
If you want to append node from a different document (for example to
display results from AJAX request) you must first use importNode.
You can also read the w3c specification of appendChild:
Adds the node newChild to the end of the list of children of this
node. If the newChild is already in the tree, it is first removed.

jstree contextmenu with a foreign node

Currently I'm trying to figure out if it's possible to attach the default contextmenu jstree uses, to a foreign node ?
To explain my scenario please go to this link and go to the bottom of the page. In the first demo you can drag'n'drop a foreign node (being "I have the jstree-draggable class") to the folders in jstree.
I'm trying to understand if it's possible to attach the jstree contextmenu plugin to that foreign node?
Yeah it's possible to attach contextmenu to foreign nodes in jstree.
You should keep in mind, though, you'll need to rewrite a lot of code if you're using different html from what you have in the tree.
In my case this was not acceptable because I had to rewrite more than half of the library so I could get it to work with my html structure.
Creating a separate context menu (as #Jed suggested) is also an option - if you have the time to deal with all the problems that will come. :)

Categories