Tree events seem out of order.

[AspWhiz]

When I drag and item over a node in my tree, I noticed that the node expands automatically. Problem is, is that when this occurs, the beforenodedrop event fires and then the expandnode. I need to use the beforenodedrop to ensure that the user is not dropping an item that already exists under the node. Having the node expand after the beforenodedrop event doesn't allow me to compare the item being dragged with any of the children under the target node.

Does anyone have a suggestion or a work around for this?

FYI, I have tried to do things in nodedragover and cannot use nodedrop because at that point the item has already been dropped.

Thanks

[AspWhiz]

Did I stump everyone once again?

[new2ext]

Are you trying to restrict what nodes are allowed to be dropped? If I'm reading right, you don't want to allow a drop if the node is already in the drop tree. If so, you could look into modifying the onNodeOver function of the TreeDropZone

[AspWhiz]

Yes basically I want to stop someone from dropping an item on the node if that item is already a child. Problem is, you cannot compare or do a search for any child node unless the node is expanded. The node has to be expanded because I'm doing a lazy load and populating the node with children when expanded.

The one solution that I have is to have the ajax call in my beforenodedrop event do a db check and call an error function on the client side, but I'd rather just be able to compare the dropped item to the child nodes. Unfortunately, the node expand event doesn't fire first which you'd think it would/should.

[new2ext]

If you set expandDelay to 0 in dropConfig, it will stop the delay for the expand function. I can't perform any tests right now, but see if it helps.

[AspWhiz]

Thanks but I'm not quite sure how to set that in the code. I tried a couple things but it kept not allowing my drop then. Could you provide and example of how you set that value. Thanks

[new2ext]

var tree = new Ext.tree.TreePanel({
	//Within TreePanel Config Parameters, put:
	dropConfig: {expandDelay: 0	}
})

[new2ext]

I just did a couple of tests, and depending on how fast the user drops the node, the beforenodedrop will still fire before expandnode. You should try setting your validation code in the onNodeOver event.

var tree = new Ext.tree.TreePanel({
	//Within TreePanel Config Parameters, put:
	dropConfig: {
		onNodeOver: function(source, e, data){
			//Your code here
		}
	}
})

Take a look at the other events in TreeDropZone for other possible solutions.
http://extjs.com/deploy/ext/docs/out...pZone.jss.html

[AspWhiz]

The line you gave me doesn't allow me to drop. That is what I did try before. I think the problem is that when the node is expanded it does this:

         loader: new Tree.TreeLoader({
            dataUrl:'get-nodes.php'
         }),

I think the problem of the events going "out of order" is cause the dropping of the node happens before the expand node get its response back when loading the nodes.

[radio1]

Hey AspWhiz,

I have implemented what you're essentially trying to do as follows -- it may not be a perfect fit for your app.

Part of my app is essentially a file-explorer with 2 panes much like Windows Explorer, with a Folder tree on the left, and a grid displaying the files (but not subfolders) for the currently selected folder on the right. Like you, I'm "doing a lazy load and populating the node with children when expanded" via the Ext.tree.AsyncTreeNode. The drag/drop I support that sounds similar to your situation is the dragging of one or more files from the file grid to a different folder node in the tree -- which the user does to trigger the "move files" functionality.

Since these file actions must be performed on the server side anyway, I mostly don't restrict which nodes files can be dropped on on the client side, except for the sanity check of ensuring the files aren't dropped on the folder node they're already in. This is the sole check I make in my 'nodedragover' event handler.

I handle the other drops in my "beforenodedrop" event handler, where I:

- ALWAYS execute "dropEvent.cancel = true;" (I don't need the 'nodedrop' handler being called for this case)
- post a command to my server requesting the file(s) move
- if the server response indicates full success (all files could be moved), then simply delete those rows from the file grid
- if the server indicates any errors, I display the server-generated error message (which indicates which files were unable to be moved) in a modal popup window, then I lazily force a reload of the grid for the current folder node in the tree.

Since my tree ONLY contains folders (not files), I cannot do the client-side drop prevention you're attempting. However, even if my tree DID contain file nodes, I couldn't rely on client-side drop-prevention since server-side problems could still occur (due to multi-user and locked-file and changed-file reasons, etc.).
I'm guessing you're in a similar position in that content dropped on nodes in your tree must be validated and reflected server-side anyway, so why not simply drop the client side checking you're attempting. Or maybe you could do it as a minor optimization ONLY when the target node's children are already loaded.

Even if you do manage to achieve what you initially described, I don't see how you wouldn't confuse your end-user when they release the mouse button after dragging an item(s) over a tree node, and the app code hasn't yet figured out whether that drop is allowed.

Just my two cents -- I hope they're useful to you or someone.
Any comments/questions/thoughts/ideas/??? are always very welcome!

-radio1