Trap double click event on magento grid row

Magento's grid functionaly has a hidden, a d not well documented feature to allow you to trap double click events on a grid row.

How can this be usefull, you may ask.

Well, recently I wanted to add the ability to a grid, to allow 'inline edits' of a field value in a grid, by simply doing a double click, rather than the standard single click that takes you to form edit screen.

I assume you already know how to extend the grid functionality, and you also know how to use your own custom grid.phtnl template for your grid.

Ok, so how to trap the double click....

Looking at magento's standard grid.js object, you will find the following code:

rowMouseDblClick : function(event){
varienGlobalEvents.fireEvent('gridRowDblClick', event);
}, 

thus the functionality is attached the the global varien events object.

To utilie this event you must define an event name in your grid.php constructor first, as such:

class TheCube_FileManager_Block_Adminhtml_Files_Grid extends  Mage_Adminhtml_Block_Widget_Grid {
    /**
     * Constructor
     * @return void
     */
    public function __construct($attributes) {
        parent::__construct($attributes);
        $this->setTemplate('filemanager/widget/grid.phtml');
        $this->setRowDblClickCallback('dblClick')
    }
..... class code continues here

This happens in your grid file that extends the base magento class of Mage_Adminhtml_Block_Widget_Grid

Now in your template file (mine is define above as

'filemanager/widget/grid.phtml'

you need to attach a function to that event as such: (I just added this to the bottom of my .phtml file, encased in a script tag, but you can also include this via layouts and a javascript file)

varienGlobalEvents.attachEventHandler('gridRowDblClick', <?php echo $this->getRowDblClickCallback() ?>);

Next you must define an actual javascript function, using the same name you defined in the callback as such:

function dblClick(grid, event){
                    alert('doubleclick trapped');
                }

and viola, when you double click a row, the alert pops up....sweet.

a final touch is to place that in a conditional, to only set the event of the grid has the option set.
So the final code in the .phtnl looks like this:

<?php if ($this->getRowDblClickCallback()): ?>
                varienGlobalEvents.attachEventHandler('gridRowDblClick', <?php echo $this->getRowDblClickCallback() ?>);
                function dblClick(grid, event){
                    alert('doubleclick trapped');
                }
                <?php endif; ?>

Note: You cannot trap both single click and double click events on the same grid, thus you must remove the single click event listener as well.

see: http://www.quirksmode.org/js/events_mouse.html on double click for more details.