ADF ! Can we make drag and drop reordering of table rows ?

The answer is quite simple… “Of course we can. Just need to understand how to do it :)”. It’s all about some experience which I got the last weeks and I wanna share it with you, because I find it really useful and user friendly from client’s point of view to have such an implementation […]

by Iliyan Kiryakov

July 15, 2014

3 min read

1713773 - ADF ! Can we make drag and drop reordering of table rows ?

The answer is quite simple… “Of course we can. Just need to understand how to do it :)”. It’s all about some experience which I got the last weeks and I wanna share it with you, because I find it really useful and user friendly from client’s point of view to have such an implementation in some cases to your ADF project. In this post I will introduce you how to implement Drag and Drop (DnD) action to the rows of ADF table.

1. Introduction

As shown in the images below, applying the code in this blog will allow you to re-arrange rows within a table using drag and drop. The dragged row is put into the place of the row it is dropped onto. It’s simply a change in the indexing of the iterator.

snapshot63

Selecting a row and dragging it to a new location as shown in the images above and below …

snapshot64

.. will then show it in its new position within the table. For this to display correctly, the table needs to be partially refreshed, causing a little flicker.

snapshot65

Note that reordering the rows in the table will only have an effect to the DCIteratorBinding (more precisely, its an effect to the RowSetIterator it decorates) in the PageDef file. The same data in the database doesn’t change a performing re-query of the iterator data will produce the previous row order unless you dynamically change the query order according to the drag and drop rows (which is not in the scope of this blog).

2. Implementation

The image below shows the JDeveloper 11.1.2.3 workspace of the sample

Hint: There is a little problem if you use a lower version of JDeveloper and in the end of the blog the solution for it is applied .

The row reordering for a table is built out of the af:dragSource tag that enables rows to be dragged within a table, af:collectionDropTarget tag is that which takes the drop event and code in managed bean that performs the change in the iterator index.

snapshot66

The image below shows the configuration of the dragSource tag, which consists of an Action: MOVE and a Discriminant: “rowmove”. The Discriminant is used to help the drag source and drop target to find together, which not only is required but also useful if you wanted to have multiple drag and drop implementations on a single view.

snapshot67

The collectionDropTarget tag is configured as shown in the image below. For the drop component, the Action is set to MOVE as well (at least one action needs to be chosen that matches the action defined in the drag source) and ModelName is set to rowmove.

Тhe DropListener property references a managed bean in the backing bean or request scope. The bean doesn’t hold any state and therefore doesn’t need to survive a single request.

snapshot68

The signature for the managed bean method is as follows …

public DNDAction methodName(DropEvent eventName)

In the images below is the listing of the commented source code of the managed bean that handles the drop for you to study and modify so it serves your use case.

snapshot69

snapshot71

3. Usage

If you are using lower version than 11.1.2.3 of JDeveloper, the method getRowData(Object object) from RichTable class is missing, but you can use the void method getRowData(). Before calling the method you need to set the the row of the table like this:

snapshot72

How do you drag and drop reordering of table rows?

Share with us some tricks that you use !

Java EE and Oracle Developer at Dreamix