There are some tasks that are not very well supported with the current widgets provided with Vaadin. One of these tasks is the sorting of big datasets. For example, you want to sort your christmas present wish list according to preference. Creating a UI for sorting those 200 items can be tricky, now you’d basically be forced to add up/down buttons and use those to move one single item up or down in the list.
I faced this same problem in a hobby project of mine. I decided that I need a more intuitive and faster way of sorting the items. For this purpose I’ve created the DragSortableVerticalLayout widget. This widget is based on CssLayout and comes with the same features with the addition that you can sort items by dragging and dropping them in the layout. As the name implies, this widget only supports vertical sorting.
As said, this is the first version of this widget. I still have in mind to improve the visualization of the sorting, ability to sort multiple items at a time by ctrl/shift-selecting different components in the layout. I’ll keep you posted on updates.
Below is a screenshot of the widget, although it doesn’t say much, so try out the live demo
I’ve made a small update to the widget which improves the visualization of the sorting, in other words, the widget now shows you where the component will be dropped as you move it around.
Trying the latest version from the incubator. Seems to have a minor bug related to the scroll bars. Run the app and the dnd area does not have a horizontalscoll, move a row the scroll bar appears, but the width hasnt changed and now you can move the row over the horizontalscroll.
If you also set the DragSortableVerticalLayout width to say 500px in the example, then the horizontalscroll is visible and when you drag a row the row overlays the verticalscroll whilst it is being dragged.
I’m aware of the problems related to width calculation, but thanks for pointing it out here on the forums so that others will be aware of it as well. There are also some issues with IE when using a drag icon for dragging instead of the entire component. I haven’t had time to fix these and don’t know when I will have the time, but fixes are planned because I’m using this widget in a project of mine, so I need the fixes as bad as everyone else
Ps. Note that the link leading to virtuallypreinstalled doesn’t contain the newest version of the widget (that one doesn’t work at all with IE), so I recommend taking a checkout of the widget from the repository and try testing with the example application available there – at least until I get the time to clean up the example application and put the newer version on virtuallypreinstalled.
