Enhanced trick to copy data from AdvancedDataGrid

Here’s a small enhancement to my trick to copy data from an AdvancedDataGrid.

My previous trick had a small drawback since selecting a row was also switching a cell to copy mode (read only edit mode).

With this enhanced version, you now have to double click in a cell to switch it to copy mode (using a non editable item editor from which you can copy data). This keeps a standard selection behavior.

Here’s the demo (with source code available):

A few words to highlight how to link the edition to double clicks only.

As you remember, I’m configuring the AdvancedDataGrid as editable and using a read only TextInput as an itemEditor to allow copying data. And now, I’m also allowing double clicks by setting the doubleClickEnabled property of the AdvancedDataGrid.

<mx:Component className="NonEditableTextInput">
    <mx:TextInput editable="false"
        selectionBeginIndex="0" selectionEndIndex="{text.length}"/>
</mx:Component>

<mx:AdvancedDataGridColumn dataField="Field" itemEditor="NonEditableTextInput"
    ...
    editable="true" doubleClickEnabled="true"/>

We still have to avoid the edition to be triggered when single clicking in a cell and my trick to achieve this is to use a third event: itemEditBegin (it is fired just before activating the itemEditor).

<mx:AdvancedDataGridColumn ...
    itemClick="itemClickHandler(event)"
    itemDoubleClick="itemDoubleClickHandler(event)"
    itemBeginEdit="itemBeginEditHandler(event)"
/>

The single and double click handlers just register the latest type of event received and, in the itemEditBeginhandler, we just have to check whether the previous received event was a single or a double click to decide if edition must be allowed or not.

private var doubleClicked:Boolean;

private function itemClickHandler(event:ListEvent):void {
    doubleClicked = false;
}
private function itemDoubleClickHandler(event:ListEvent):void {
    doubleClicked = true;
}
private function itemEditBeginHandler(event:AdvancedDataGridEvent):void {
    // If doubleClicked => allow edit
    // If not => do NOT edit
}

The last trick here is to know how to cancel the itemEditor activation on single click event. Once you know that the itemEditBegin event is a cancelable one, it should become obvious (if it’s not, you may be interested by my article on Advanced Events Management).

private function itemEditBeginHandler(event:AdvancedDataGridEvent):void {
    if (!doubleClicked)
        event.preventDefault();
}

Enjoy!