Selectable Text in Flex DataGridColumn

Last day my junior asked me a question “How do I make text selectable in a DataGridColumn? I want the user to copy the text from the datagrid.”. Well I had really didn’t thought about that feature till then. Important thing, by default you cannot copy the text shown in the datagrid if you are using the default ItemRenderer. But this turned out to be very very easy one. Couple of options.

1.  The most simple one. Make the ItemRenderer of the datagrid column as mx.controls.Text.

<mx:DataGridColumn dataField="name" headerText="Name" itemRenderer="mx.controls.Text"/>

2. By default the item renderer of a datagrid column is DataGridItemRenderer which is based on TextField. And the selectable property is set to false. So extend another class from DataGridItemRenderer and set the selectable property to true.

package com.renderers
{
    import mx.controls.dataGridClasses.DataGridItemRenderer;

    public class SelectableDataGridItemRenderer extends DataGridItemRenderer
    {
        public function SelectableDataGridItemRenderer()
        {
            super();
            this.selectable = true;
        }
    }
}
<mx:DataGridColumn dataField="name" headerText="Name" itemRenderer="com.renderers.SelectableDataGridItemRenderer"/>

3. Create a custom component with a selectable label and assign it as the ItemRenderer.

SelectableDataGridItemRenderer.mxml

<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml" selectable="true">
</mx:Label>

 

<mx:DataGridColumn dataField="name" headerText="Name" itemRenderer="SelectableDataGridItemRenderer"/>

The last two options are just said, in case the first simple one doesn’t work. If you are using a custom Item Renderer, then you are on your own. 🙂

Happy Coding Guys… 🙂

Advertisements

Tags: , , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: