In this demo I tried to combine the usefull drag and drop functionality provided by ADF together with the af:tree component.

The idea was very simple. Having a two level tree with Departments on the first level and Employees on the second. Expanding a Department node will make all Employee nodes that belong to the specific department appear. Further more utilising the powerfull and easy to implement drag and drop functionality the user should be able to drag an employee from one department and drop him to another.

The drag and drop functionality will simply get the dragged Employee and change his DepartmentId to the DepartmentId of the Department he was dropped on.

In the Model project we just need the Departments and Employees view objects (Employees should be updateable) connected with a viewLink based on common attribute DepartmentId. In the Employees view object we need a bind variable which we also add to the query so that we can execute-with-params.


After adding these to the ApplicationModule it should look something like this:

Application Module

We then create the jspx page, drag and drop the Departments datasource from the Data Sources pallet and select af:tree. On the wizard that opens you can see the Departments node allready added to the binding. Click “+” to add the Employees node also. By selecting each node you can add the attributes that you want displayed on the page.

data sources

Edit Tree Binding 1

Edit Tree Binding 2

The bindings in page definition are now ready and the initial jspx code for the tree was generated. After a few changes on the page the drag and drop functionality is allready almost implemented.

The af:dropTarget along with the af:dataFlavor were added on the component displaying the Departments defining the drop zone and the af:clientAttribute along with the af:attributeDragSource were added on the Employees component allowing it to get dragged. Check the details bellow


As you can see the dropListener was bound to a method in the backing bean. In this method the dragged Employee Id and the Department Id of the Department it was dropped on are retrieved. Now that we have the Employee and the new Department we can set the Employee.DepartmentId=new DepartmentId. To do that we call a method in the Aplpication Module Impl class and refresh the tree component on the page.

Backing Bean code

In Application Module Impl method we set the EmployeesVo bind variable and execute query to get the Employee row. On that row we set the DepartmentId attribute and re-execute the Employees view object.

Application Module Impl

You can see a video of the application running here

For the source code click here


This entry was posted on Saturday, October 23rd, 2010 at 1:34 pm and is filed under ADF. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
3 Comments so far

  1. sahib on November 11, 2011 11:30 am

    super awesome stuff dude… thanks a lot

  2. ammu on December 16, 2011 2:10 pm

    hi can u help me in drag and droping btween same tree in two different panel box for me its throwing some unwanted errors:(
    cant find any solution:(

  3. Gabriel on December 17, 2011 7:33 pm

    I do not fully understand your use case.
    Do you have two instances of the same tree in the page and how did you implement this?
    What is the error you are getting?

Name (required)

Email (required)


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Share your wisdom