Tuesday, March 29, 2011

Displaying an edit dialog on double click of a table row

Let me share an interesting use case this time. There is read only table with an 'edit' link enabled for each row. The end user can open up the edit dialog either by clicking on this edit link or by double clicking on the table's row as shown in the following screen shot.


Download

You can download the sample workspace from here.
[Runs with Oracle JDeveloper 11g R1 PS3 + HR Schema]

A glance at the implementation

Implementation of edit dialog and displaying the same on click of <af:commandLink> is straight forward and doesn't need any explanation. Please see the tag doc for <af:popup> if you are looking for a detailed explanation on this. The trickiest part is showing the dialog with the selected row's data when user double clicks on a row. This is done by using <af:clientListener> to invoke javascript method. This client side method queues AdfActionEvent on the commandLink. Thanks to Kamran Kashanian for sharing this tip. Please take a look at the following code snippet to get a feel of implementation.

  <af:resource type="javascript">  
     function showEditorPopup(e) {  
        var table = e.getSource();  
        var keys = table.getSelectedRowKeys();  
        var selectedKey;  
        /** * Find the selected row key * */  
        for (var k in keys) {  
          selectedKey = k;  
          break;  
        }  
        /**   
         * Find the commandLink  
         * and queue the action event on it   
         * */  
        var cl = table.findComponent("cl1", selectedKey);  
        var event = new AdfActionEvent(cl);  
        event.queue(cl.getPartialSubmit());  
     }       
  </af:resource>  

6 comments:

Brother said...

Hi.
Will this work with JDeveloper 10g?

Jobinesh said...

No, It works with 11g(not tried with PS1/PS2 though)

Magesh said...

I have similar scenario but with tree. I am using selection listener and wanted to get the value before the node was selected. I tried with removedset from the event object, but returns null.


function onNodeSelection(event)
{
var tree = event.getSource();

var keys = tree.getSelectedRowKeys();
var selectedKey;
/** * Find the selected row key * */
for (var k in keys) {
selectedKey = k;
break;
}

/**
* Find the commandLink and cancel event on it
* */
var cl = tree.findComponent("ag_cl1", selectedKey);

if (cl.getDisabled())
{
event.cancel();
<>
}
else
{
<>
}
}

I tried setting a constant value for testing purpose using event.setSelectedRowKeys() which again triggered this method.

Can you please let me know how to get the selection value before this node was clicked.

This is used in a taskflow, I also tried using AdfPage.PAGE.getElementByID and that always returned null.

Jobinesh said...

Magesh,
Try using af:clientAttribute instead of getSelectedRowKeys. The following links may be useful
http://download.oracle.com/docs/cd/E16162_01/web.1112/e16181/af_event.htm#ADFUI766
http://jobinesh.blogspot.com/2011/03/passing-dynamic-parameters-to-java.html

Nachiket Achar said...

Hi Jobinesh,

Is it possible to do the same for a onmouseover? If so, how could we get hold of the row which is on focus?

NandaB said...

work very smooth with me.
Thanks a lot!