Sunday, August 29, 2010

Column button in a read only table. Edit in a Popup and return values.

Here a simple example of how to add a button in a read only af:table and show a popup with an editable form of the current row.

Download Sample Application.

The first page can be done rather easy.
Simply drag and drop the iterator from the Data Control into the page and choose read only table.
Then, in the table add a column.
Inside the column add a commandButton.

This commandButton will show the popup.

Create a popup that will include a Dialog inside. The Dialog type will be ok/cancel.
Inside the dialog drag and drop the same iterator as previously but this time choose form.
The submit button is not necessary in our case.

Here is the generated code from JDeveloper

We are not just done yet.
In the button we have to add a showPopupBehavior and point the id of popup.
When the button will be pressed the popup will be shown with the current record ready to be edited.
Here is the code of the button:

 At this point, if you test it, you will find that no matter which edit button you ll press, you ll still see the first record in the popup.

This is simply because the popup by default caches it's results.
To change that, just change the contentDelivery to lazyUncached:

With this way, the data are always refresh upon the show of the popup.

In order to  refresh the data of the table in the back ground, we need to add a partialtrigger to the table.
The partialtrigger will be the id of the dialog which is inside the popup.
So when the user presses the ok button the table will be refreshed and show the new data.

At this point we are good to go..

after ok pressed.

Download Sample Application.


  1. This is great, but I have a minor bug. Whenever I close the popup, the next item I try to open will require 2 click (not a double-click) on the edit button.



Related Posts Plugin for WordPress, Blogger...