Stephen's dev blog

I’ve just had a thought that it was hard to come accross resources for handling double click events on DataGrids in Flex 3.

There are lots of tutorials on how to handle them in Flex 2 but this doesn’t apply for Flex 3, as Flex 3 natively handles double click events and Flex 2 did not.

There are also a lot of tutorials on how to amend functionality so that you have to double click to edit a row instead of the default single click. This tutorial does not cover this, this tutorial covers functionality of double clicking a row and then triggering something. I.E. a table of products, you want to double click a row to view product details etc.

First off, we need to make a slight amendment to our DataGrid (or AdvancedDataGrid, same applies to both):

<mx:DataGrid id="MyDataGrid" doubleClickEnabled="true" itemDoubleClick="functionName(event);">
...

There are obvious meanings to both of these new attributes; doubleClickEnabled is used to tell Flex we want to allow/handle double click events on this DataGrid and itemDoubleClick tells Flex which function to use.

The above function should look something like:

protected function functionName(event:ListEvent):void
{
    var selectedRow:Object = event.currentTarget.selectedItem;
    Alert.show(selectedRow.myVariableName);
}

You can directly access the selected row from the DataGrid using the event.currentTarget.selectedItem reference. You can then access any variable that exists in the DataGrid’s dataProvider for that row.

Of course to get the above working you’ll need to:

import mx.controls.Alert;
import mx.events.ListEvent;

Stephen.