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<ModelData> (com.extjs.gxt.ui.client.store.StoreListener)

This implementation should have the following functions:

  • public void storeAdd(StoreEvent<ModelData> se)
  • public void storeDataChanged(StoreEvent<ModelData> se)
  • public void storeRemove(StoreEvent<ModelData> se)
  • public void storeUpdate(StoreEvent<ModelData> 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<ModelData> tse = (TreeStoreEvent<ModelData>) se;

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

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

For Remove the interesting attributes are:

TreeStoreEvent<ModelData> tse = (TreeStoreEvent<ModelData>) 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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s