Trick to copy data from a Flex AdvancedDataGrid

Here’s a small trick to allow copying individual cell data from a Flex AdvancedDataGrid.

When using a non editable Flex AdvancedDataGrid supporting selection, there’s no default way of just copying the content of a given cell.

The easiest trick I found consists in setting the AdvancedDataGrid as being editable and defining as an itemEditor a simple TextInput configured as not being editable and with its content selected!

In other words:

Ensure your AdvancedDataGrid is defined as editable:

<mx:AdvancedDataGrid editable="true" dataProvider="{gridData}">

Define a non editable TextInput selecting its content:

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

And use it as an itemEditor for your AdvancedDataGrid:

<mx:AdvancedDataGridColumn dataField="Field" itemEditor="NonEditableTextInput"/>

Now, when clicking in any cell of the AdvancedDataGrid, the non editable TextInput is displayed with its content selected and ready for copy.

Here’s a working example (with source code available):

In addition, let me take this post as an opportunity to mention a very useful utility site: Mr. Data Converter. Just paste CSV or tab delimited data and it will convert your data into one of several web-friendly formats, including XML, HTML, PHP and.. ActionScript! This is really a good tool when you want to generate some test data for a Flex AdvancedDataGrid in a few seconds