Tree Drag and Drop in GWT / GXT

Tree Drag and Drop in GWT / GXT

In Ext Gwt or GXT there are various ways to intercept drag and drop events directed at a Tree or TreeGrid. However, many of these do not necessarily lead to the expected results. There is also not much documentation of how to work with these events.

  1. Implement the Interface StoreListener (com.extjs.gxt.ui.client.store.StoreListener)

This implementation should have the following functions:

  • public void storeAdd(StoreEvent se)
  • public void storeDataChanged(StoreEvent se)
  • public void storeRemove(StoreEvent se)
  • public void storeUpdate(StoreEvent se)
  1. The secret now is really that the events for each of these methods need to be cast to TreeStoreEvent (com.extjs.gxt.ui.client.store.TreeStoreEvent)

For Add the interesting attributes can be accessed using:

TreeStoreEvent tse = (TreeStoreEvent) se;

ModelData parent = tse.getParent(); // the node that new children have been inserted to

List children = tse.getChildren(); // the inserted nodes

For Remove the interesting attributes are:

TreeStoreEvent tse = (TreeStoreEvent) se;

ModelData parent = tse.getParent();

ModelData child = tse.getChild();

(node that for remove its tse.getChild() rather than tse.getChildren())

Note that these events are no 'Drag and Drop' events as such but rather generic events triggered by the data model of the Ui. Therewith, these events will also be triggered if the Tree is modified in another way than by drag and drop.

Resources

Official TreeModel JavaDoc (explains the events and their parameters)

Example using GXT Dnd Framework for Tree Dnd

Tutorial explaining how a tree can interact with remote data

GXT Example showing how to catch DnD events directly

How to add a selection listener to a tree