Sunday 21 February 2010

YUI Treeview with Drag and Drop and Context Menu's

I've been developing more with the YUI library for the implementation of a concept demo relating to a new project at work. The demo UI is coming along nicely. For one screen I've got two treeview controls, I've managed to get drag and drop between the tree's working and I also have context menu's on the tree nodes for the creation and deletion of new nodes. I didn't want to move the actual nodes from tree to tree but create a copy when the drag and drop was complete. So I created an override for the onDragDrop function of the YAHOO.util.DDProxy by extending the object. Doing this allowed me to return the dragged element and create a new TextNode.

The dynamic creation of nodes, either via a context menu or a drag and drop operation was causing the context menu's and drag and drop targets to be lost after any change to the tree was made. I did some searching and discovered that when the tree refreshes the DOM elements for the tree nodes are recreated. Meaning the context menu's and drag and drop targets were being dropped. To solve this, after the draw() call on the tree (required to see new nodes), I used the following:

...
tree.draw();
parentNode.expand();
YAHOO.util.onAvailable(newNodeID, function(){
createContextMenusAndDDTargets();
});

Although this works very well, I don't like recreating the menu's each time a change is made. It just seems wrong. Perhaps there is a better way? Maybe I can store the context menu's on the TextNode instances and reassign them when the tree is refreshed... Will have to look into that.

No comments:

Post a Comment