Drag N Drop Grid To Tree in Ext-GWT (GXT)

Ext-Gwt(GXT) is a Java library for building rich internet applications with GWT. It provides various good features in the library. Developer can easily implements drag n drop features in their web applications with few line of codes. This is one simple example to drag from grid and drop the item into the tree.

First of all, we need to make the draggable grid. We can use the GridDragSource to do this.I just wrap the grid with the GridDragSource and it is done.

Grid draggableGrid = new Grid();
new GridDragSource(draggableGrid);

Next step is to prepare the droppable tree. We can use TreeDropTarget to wrap it. However TreeDropTarget comes with some build in tree's features which is no needed, and that cause lacking of some flexibility. Therefore , i decide use the super class for TreeDropTarget which is DropTarget.

Tree myTree = new Tree();
DropTarget dropTarget = new DropTarget(myTree);

Just wrap the tree with this DropTarget and it is done, now you can drag from grid and drop into the tree.

There are few listeners to let developer customize for different scenario. For my scenario, I override method onDragMove so that i can control whether the "drop" on specific location is valid.

@Override
protected void onDragMove(DNDEvent event){
	TreeItem treeItem = tree.findItem(event.getTarget());
	if(condition){
		event.status.setStatus(false);						
	}else{
		event.status.setStatus(true);
	}
	super.onDragMove(event);
}

Besides, I also implements dragDrop listener to perform final action when the item is dropped into the tree.

public void dragDrop(final DNDEvent event){
        // Process the data here
	process(event.data); // Data Selected, perform some action on this

	event.source; // source
}

That all for a simple grid to tree drag n drop, enjoy.