HOW TO: Drag N Drop From Tree to Tree

cconover's picture

The current project I am working on requires tree to tree Drag n Drop (DnD). The Studio provides DraggableTree but it only provides DnD within the same tree: useful, but I really need tree to tree.

So I went looking for some how-to code and the Dojo Toolkit provided a solution, but as we all know, it's not simple cut n paste into your WM project. After about a day's worth of inching my way closer to a solution, I finally figured it out.

The attached project uses two HTML widgets with some div tags that define the tree that will eventually populate the HTML's real estate. The code in the Main page uses hard-coded data to populate the trees using a data store and a tree model. A bit complex for the average WM app jockey out there, but hopefully this will provide a template for you to use if you need tree to tree DnD.

By the way, this can also be a list to tree DnD or whatever two data container widgets you wish to implement. You just need to figure out the store/model implementations for the desired widget. Dojo Toolkit should be able to show you the way.

Enjoy!
Craig

AttachmentSize
HOWTO_DnDTrees.zip127.84 KB

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
mkantor's picture

I'd certainly be interested

I'd certainly be interested in discussing drag and drop support for projects one of these days. The only way I can see it working easily is to make certain constraining assumptions about the types in tree or list 1 and the types in tree or list 2.

Michael Kantor
SMTS; WaveMaker/SpringSource/VMware

Michael Kantor
WaveMaker Expert; Managed the client-side frameworks and Studio UI from WaveMaker 5.2 - WaveMaker 6.6 M2

cconover's picture

More to do

Yeah, this sample is not fully vetted. Still some work to do to make DnD of a folder carry its children recursively. I thought about making this a custom widget, but I think it will take me too much time to get it working well to make it worth it for the project I am working on.

Would be interested in discussing further the future of DnD in WM.

Support of list to grid

is this possible to drag from a list onto a html (table) or dojo grid? Just wanted to know dojo Dnd package supports table or grid.

-Anand

cconover's picture

Yes and no...

Yes - theorectically, I suppose any widget can be made to support DnD. Lists for sure as that is one of the examples in the links I provided which I based my WM app on.

No - it will not be a WM widget from the the palette (as it stands today). You need to use the HTML widget and provide the appropriate div tag for the list widget just as I did for the tree dijit.Tree widget.

Currently, the only DnD support in WM off the palette is the DraggableTree, but as I stated, only supports DnD from/to the same DraggableTree instance, not tree to tree, list to tree or tree to list. But that doesn't mean it can't be implemented, it would just take a mandate to prioritize this feature in WM. I can't speak for engineering, but I suspect tree to tree and possibly list/tree to tree/list could be implemented in a future release if the demand justified it.

cconover's picture

Updated Project

So I've figured out a lot about how the DnD events work and made some progress on constraining what can be dropped where. In this updated project I have change the dataset (countries, cities, sales reps) and added custom icons based on the node type.

In this project you will have a "pruned" tree on the left (just countries, cities & empty sales rep folders) and on the right you have the same but the sales reps are full of, well, sales reps.

The idea is to reassign sales reps to new countries and cities by dragging them from the right to the left. You can only drop a sales rep leaf onto a sales reps folder. I have also enabled dropping a city into a country, but it doesn't bring the folders children with it (next version).

Within the right tree, you can drag a city to another country and its children go with it.

The code should be pretty straight forward with how everything is connected, but some things can be a bit subtle. Don't forget to look at the "html" property of the Html widget, htmlTree1 & htmlTree2, that I use to create the tree widgets. I'm not entirely sure why I had to configure those tree attributes in there as well as in code and why I didn't have to include other tree attributes, but it works.

Eventually, I'd like to persist the changes. That's the goal of my internal project and I'll continue to update this project with enhancements as I figure them out and as I have time to do so.

Cheers
Craig

AttachmentSize
HOWTO_DnDTrees.zip 137.95 KB
mavirroco's picture

nice job i need this on my next app :D

Manuel Rodriguez Coria
Tarija, Bolivia

mavirroco.com
mrodriguez@mavirroco.com
mavirroco@gmail.com

Manuel Rodriguez Coria
Tarija, Bolivia

www.mavirroco.com/contact.html
mrodriguez@mavirroco.com