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>