Drag & Drop a row from a TreeGrid to Layout

Flow
1

Does the latest version 14.0.0.beta2 support drag and drop a row from a TreeGrid onto say a VerticalLayout?

Thanks.

2

Hi Eugene. Yes it does, but you need to add the artifact for the flow-dnd module separately, since it is not a transitive dependency to the vaadin or vaadin-core dependencies. Then you can make the VerticalLayout a DropTarget.

You can read more about this from the [Flow release notes]
(https://github.com/vaadin/flow/releases/tag/2.0.0.rc2) under Other notable things in Flow 2.0. This particular use case works even in Firefox, but keep in mind that for some components, the drag cannot be started by the user in Firefox due to a bug in it. This has been fixed already and will be released in FF68 in beginning of July. Luckily, starting a drag from Grid or TreeGrid rows works.

3

Thanks for the getting me started. So I added the artifact and I was able to drop onto my VerticalLayout but I’m having difficulty setting the drag data as per line 80 in the following https://github.com/vaadin/flow/blob/master/flow-dnd/src/test/java/com/vaadin/flow/component/dnd/DragSourceTest.java as the event.setDragData method doesn’t exist in the TreeGrid.

So, in my TreeGrid I already have it set to draggable as I’m able to rearrange items within the tree. I also want to be able to grab and item from the tree and drop it to my VerticalLayout. This is what I have in my TreeGrid:

//instance variable
private List<Object> draggedItems;

//in constructor
this.setDropMode(GridDropMode.ON_TOP_OR_BETWEEN);
this.setRowsDraggable(true);
this.addDragStartListener(event->draggedItems=event.getDraggedItems());  //don't know if this is the best way but it works.
this.addDropListener(event->itemDropped(event));

I use the draggedItems in my TreeGrid as well as per the following:

private void itemDropped(GridDropEvent<Object> event) {
	if (draggedItems==null || draggedItems.size()!=1) {
		draggedItems=null;
		return;
	}
	Object droppedObject=draggedItems.iterator().next();
	draggedItems=null;
	...
}

On my VerticalLayout component that I extend using Composite I have the following in the constructor:

DropTarget<Component> dt=DropTarget.create(this);
dt.addDropListener(event->itemDropped(event));

Then I have the method:

private void itemDropped(DropEvent<Component> event) {
		System.out.println("Item dropped");
		System.out.println(event.getComponent());
		System.out.println(event.getSource());
		System.out.println(event.getDragData().orElse("NONE"));
}

The event.getComponent and event.getSource both reference “this”. The drop works I just can’t seem to get the object that references the selected row in the TreeGrid. I’m working with little documentation/examples so any help would be greatly appreciated.

Thanks.

4

This is great - you’ve discovered a bug in the integration between Grid DnD and the generic DnD.

I think they both (Grid&TreeGrid) are missing the calls to set the active drag source, and the server side drag data for the component, which is used in the generic DnD add-on’s DropEvent to get the drag data. I’ve created an issue about this, it contains a possible workaround https://github.com/vaadin/vaadin-grid-flow/issues/661