Drag-n-Drop Sortable List Control

[Les (Les Hazlewood)]

Hello,

I need to be able to sort list elements in an existing list by dragging and dropping the list elements into the desired index position. I’d like to use something like this:

http://jqueryui.com/demos/sortable/

Is there anything in Vaadin that does this, or, if not, any tips on how to create it myself? I’m thinking an IndexedContainer might be used, but I’m not exactly sure how it would work (still researching).

Vaadin’s existing List Builder might be sufficient for what I’m looking for, but it has what I consider a UI flaw: there is no way to sort the list items on the right (no up or down buttons as exist in other list builders). This requires an end-user to remove items and add them back one at a time, carefully ensuring they don’t screw up the addition order to get a final ordered list. Very cumbersome.

Any tips or pointers are much appreciated.

Thanks,

Les

[Henri2 (Henri Sara)]

@Les Hazlewood

I need to be able to sort list elements in an existing list by dragging and dropping the list elements into the desired index position. I’d like to use something like this:

http://jqueryui.com/demos/sortable/

Is there anything in Vaadin that does this, or, if not, any tips on how to create it myself? I’m thinking an IndexedContainer might be used, but I’m not exactly sure how it would work (still researching).

Vaadin’s existing List Builder might be sufficient for what I’m looking for, but it has what I consider a UI flaw: there is no way to sort the list items on the right (no up or down buttons as exist in other list builders). This requires an end-user to remove items and add them back one at a time, carefully ensuring they don’t screw up the addition order to get a final ordered list. Very cumbersome.

Take a look at the
drag and drop
samples, click on the source code link. The first sample demonstrates rearranging items in a tree, whereas the second allows you to drop items from a tree to an arbitrary location in a table. You could combine these, simplifying the code somewhat if working only inside a single table.

IndexedContainer or BeanItemContainer is probably the easiest to work with if you can afford to keep all items in memory.

Note that auto-scroll when dragging is not supported in the current versions.

[Matti (Matti Tahvonen)]

Hi,

You can achieve similar control with Tree or Table. In Tree you don’t necessary need to use hierarchy and in Table you can have just one column.

Check our the Tree demo in Sampler:
http://demo.vaadin.com/sampler/#DragDropTreeSorting

cheers,
matti

[Les (Les Hazlewood)]

Hi Matti,

Thanks for the reply - I’ll give it a shot!

Cheers,

Les

[Les (Les Hazlewood)]

Thanks Henri.

It would still be nice to be able to drag-n-drop between two lists as the JQuery demo shows. I believe this is a much better UI paradigm (more intuitive, easier to control, easier to order) for building lists than two select boxes with back-and-forth arrows.

Has anyone worked on anything like this? What are the odds that the Vaadin team could add it as a new feature/component?

Cheers,

Les

[Henri2 (Henri Sara)]

@Les Hazlewood

It would still be nice to be able to drag-n-drop between two lists as the JQuery demo shows. I believe this is a much better UI paradigm (more intuitive, easier to control, easier to order) for building lists than two select boxes with back-and-forth arrows.

Has anyone worked on anything like this? What are the odds that the Vaadin team could add it as a new feature/component?

It is better for some users, but not good for all - it should also be possible to perform the same operations with the keyboard. Nevertheless, supporting both would not hurt.

There is an
enhancement request (#4389)
for support for drag and drop in TwinColSelect, but it is currently not targeted to any version. Furthermore, if it matters to you, TwinColSelect does not keep the order in the selected list as far as I can remember.

Feel free to create an add-on that implements this (and publish it in the
Directory
) if you need the functionality - that should not be too hard, and can be done entirely on the server side, subclassing e.g. the
CustomField
add-on.

[Les (Les Hazlewood)]

Hi Henri,

This is great feedback - thanks! If I can dedicate any of my already sparse time, I will definitely try!

Best,

Les

[Michael23 (Michael Krog)]

@Henri Sara

IndexedContainer or BeanItemContainer is probably the easiest to work with if you can afford to keep all items in memory.

I’m wondering why the core has no default DropHandler for Indexed Containers. Is it because the Indexed interface does not apply all the needed methods to the container for it to work?

Vaadin rockz, but really… Take an overview at this…

I have an arrayList of beans.
I put the list in a BeanContainer.
I set the container on the table.

I seems logical to me that this scenario could easily have drag-drop enabled but right now it requires a bunch of logic in the drophandler.

[kosten (kosten john)]

Hi, I have question here,

I created a drag drop tree sorting based on this url http://demo.vaadin.com/sampler/#ui/drag-drop/dragdrop-tree-sorting.
I created nodes based on below sorting;

Node1
Node2
Node3
Node4
Node5

And then I proceed with the save (in db). But when I reload back, the sorting become messy as per below;

Node2
Node1
Node3
Node5
Node6

The sorting will randomly rearrange. In database, the sorting also not correctly save as per arrangement above. I am using below code to get values from tree (the sorting already mess at this stage);

HierarchicalContainer container = (HierarchicalContainer) tree.getContainerDataSource();

List<?> ids = container.getItemIds();
for (Object id : ids){
///print Node here (output already mess)
}
So any way I can fixes this problem?