Flex : DataGrid ItemRenderer and DoubleClick Oh My !!

I love it when you come across those little ‘gotchas’ when programming. Today I found one and it took a while to figure out a solution/hack so I thought I would post my findings and save someone else a little time.

Scenario: You have a DataGrid which uses an ItemRenderer to display the contents of a cell and you need this DataGrid to respond to DoubleClick events.

Problem: The DoubleClick does not fire when the clicking occures in the white space of the item renderer.

Solution: Enable DoubleClick in the itemRenderer as well and send the event to a dummy event handler.

Here’s an example to clarify. First a MXML component containing the DataGrid.

<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function dblClickHandler(event:ListEvent):void
{
  Alert.show("Double your fun");
}
]]></mx:Script>
<mx:DataGrid id="myGrid" width="100%" dataProvider="{myArrayCollection}"
doubleClickEnabled="true" itemDoubleClick="dblClickHandler(event)">
 <mx:columns>
  <mx:DataGridColumn headerText="Col1" itemRenderer="claire.renderer.myCol" />
  </mx:columns>
</mx:DataGrid>

Here is the itemRenderer claire.renderer.myCol. Basically we enable double click and for the doubleClick event and we send the event to a dummy handler

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" doubleClickEnabled="true"
 doubleClick="dummyClickHandler(event)">
<mx:Script>
<![CDATA[
private function dummyClickHandler(event:Event):void
{
  // do nothing
}
]]>
</mx:Script>
<mx:Label text="{data.artistName}" fontWeight="bold"/>
<mx:Label text="{data.artworkMedium}" fontStyle="italic"/>
<mx:Label text="{data.artworkSize}"/>
</mx:VBox>