Double Click Enabled Flex Spark DataGrid Example

Enabling the double click property on a Spark DataGrid is very simple except for one simple gotcha.

First, the obvious: In order to make a spark datagrid double clickable, you need to set the property doubleClickEnabled to “true”.

Next, the part that always trips me up, is that you need to set the editable attribute on the datagrid to “true”.  This will allow you to double click one of the default text item renderers and edit the text within the data grid cell.  View a the sample data grid code below:

<s:datagrid id="personDataGrid" editable="true" doubleclickenabled="true" dataprovider="{new XMLListCollection(namesXML.children())}">
  <s:columns>
    <s:arraylist>
      <s:gridcolumn headertext="Name" datafield="@name">
      <s:gridcolumn headertext="Role" datafield="@role">
      <s:gridcolumn headertext="Movie" datafield="@movie">
    </s:gridcolumn></s:gridcolumn></s:gridcolumn></s:arraylist>
  </s:columns>
</s:datagrid>

With these two attributes you can allow double click editing of any cell in a Flex Spark DataGrid.

An example of this is shown below. You can right click the example to view the source.