Drag & Drop in a af:treeTable

My task was to offer a kind of folder structure in a tree table and use an easy way to connect nodes with each other. The easiest way is drag & drop because this is intuitive and you can use it fast across many nodes. Alternatively, a use of arrow buttons could be used to move a node, but you often need a lot of clicks.

The first thing we need is a table structure which offers this possibility. As a reference I take the HR schema and the employees table.

HR.EMPLOYEE table

This table has a self-reference via the ManagerId, which holds an EmployeeId again.

In a tree table this can look like the following:

treeTable structure in ADF source view

The interesting thing is that I do not use #{node.Email} but #{node.bindings.Email.inputValue} instead. With the help of the name binding part I get access to all binding structures of this value.

The following components are needed to handle drag & drop:

Drag source in ADF source view

This offers the source and destination of the DropListener to be catched and used in java.

If you drag & drop a node to another node then this node is a new child of the destination node with all its children. If you clean the connection then the node with all its children is on the top level without any parent (next to “Stephen King”).

To open all nodes recursively, which can take a long time, depending on the amount of data: