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 […]
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.
Selecting a row and dragging it to a new location as shown in the images above and below …
.. 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.
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.
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.
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.
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.
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:
How do you drag and drop reordering of table rows?
Sign up for our newsletter and never miss an article
[mc4wp_form id=8036]
Manage Consent
To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.
Functional
Always active
The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
Preferences
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statistics
The technical storage or access that is used exclusively for statistical purposes.The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.