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!

VN:F [1.9.8_1114]
Rating: 5.0/5 (1 vote cast)
Enhanced trick to copy data from AdvancedDataGrid, 5.0 out of 5 based on 1 rating
  1. toshe
    February 8th, 2011 at 20:34 | #1

    Thanks for the code.
    If the user has the focus in a TextInput but resizing the application makes the entire TextInput invisible the application throws exceptions.
    I added the following code to prevent this annoyning behaivour.

    mx:AdvancedDataGrid
    resize="setFocus()"

    It’s actually Flex SDK 4.1 error.
    I hope there is also a better workaround.

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
  2. Jim
    July 4th, 2011 at 09:15 | #2

    Do you also have a spark version (flex 4)?

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
  1. November 20th, 2010 at 17:42 | #1
  2. September 23rd, 2013 at 22:33 | #2
Put ActionScript or MXML code snippets between tags: [as3][/as3]
You can also resize the comment area by dragging the bottom right corner.