Using Drag&Drop on tree structure with SmartGwt

The TreeIt has never been as easy to create a thin client web application as it is with the tools such as GWT and it’s third party library SmartGwt. This is a deadly combination which has out-of-the-box support for drag&drop, asynchronous remote procedure calls, localization, history management and much more inherited from GWT (Google Web Toolkit) and accompanied with numerous customizable widgets (lists, trees, buttons, layout support widgets, HTML5 support…). In this text, a simple drag&drop implementation will be demonstrated.


After setting up the required environment (see links below), we need a class that will implement EntryPoint interface, which will force it to implement onModuleLoad() method, with self-explanatory name.

Now, let’s create our tree structures:

Tree leftTree = new Tree();

leftTree.setModelType(TreeModelType.CHILDREN);

leftTree.setRoot ...

Setting model type to CHILDREN means that we will specify children nodes for each node. Other way would be to use PARENT type and then we would be specifying parent ids for each node that has a parent.

We set the actual data using setRoot method. I omitted the details for readability here. Numerous other method for filling up the tree could be used also, like variants of simple add, addList or even connecting our structure to some data source like XML Schema, relational database or EJB.

Note that this is only a data structure and we still need some “physical” representation:


final PartsTreeGrid leftGrid = new PartsTreeGrid();

leftGrid.setDragDataAction(DragDataAction.MOVE);

leftGrid.setData(leftTree);

grid1.getData().openAll();

DragDataAction.MOVE means that the dragged item will not stay in the originating tree (in contrast to DragDataAction.COPY).

setData is used to bind earlier created data-set to this graphical representation.

PartsTreeGrid is actually a custom extension of TreeGrid adding some face-lifting instructions, and i will emphasize only these lines here:

setCanReorderRecords(true);

setCanAcceptDroppedRecords(true);

setCanDragRecordsOut(true);

Yes, this is all you have to do to enable drag&drop in your application!

Analogously we add the gird to the right and also the arrow buttons to demonstrate transfer of the selected nodes with mouse click.

And to demonstrate the layout capabilities let’s see how we construct our parts together:

HStack grids = new HStack(10);

grids.setHeight(160);

grids.addMember(leftGrid);

grids.addMember(moveControls);

grids.addMember(rightGrid);

grids.draw();

Those familiar with Java Swing will see the similarities. Basically we create appropriate layout and fill it with elements. Layouts can be nested, so combining horizontal and vertical layouts (or some more complex layouts) we can create whatever we want to.

Ah i almost forgot! Our program is finished.

OK, almost completely, this example is using demonstration framework, but what we would additionally need to do would be to create a simple html page referencing generated JavaScript code (GWT is compiled into JavaScript) and add our grid to the rootPanel using

RootLayoutPanel.get().add(...

If we were not connected to some data source, then now we need to manually handle the data changes. We could subscribe the gird for changes, update the data on exit event or else, whatever suits our needs.

For info about GWT please see: http://code.google.com/intl/hr-HR/webtoolkit/

For info about SmartGwt, see: http://code.google.com/p/smartgwt/