Flex – Double Click to edit functionality for List Control

When for a list control the property editable is set to true, one can click on the item and rename the label or edit the item if an item editor is set. Here is a work around if you wish to enable editing only on double-click:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init();">


import mx.events.ListEvent;
import mx.core.EventPriority;

private function init():void {
myList.addEventListener(ListEvent.ITEM_DOUBLE_CLICK, onItemDoubleClick, 
			false, EventPriority.DEFAULT_HANDLER);
myList.addEventListener(ListEvent.ITEM_EDIT_END, onItemEditEnd, 
			false, EventPriority.DEFAULT_HANDLER);

private function onItemDoubleClick(event:ListEvent):void {
if (event.itemRenderer.data == "One") {
if (event.isDefaultPrevented()) {
myList.editable = true;
myList.editedItemPosition = {columnIndex:0, rowIndex:event.rowIndex};

private function onItemEditEnd(event:ListEvent):void {
myList.editable = false;

<mx:ArrayCollection id="myData">

<mx:Label text="Doubleclick any item to edit…"/>
<mx:List id="myList" doubleClickEnabled="true" dataProvider="{myData}" width="200"/>


Click here for live example.

Let me know incase of any bugs…

About Tushar

Hi, I am Tushar Wadekar from Pune, India. I am an Adobe Certified Flash Developer. My Interests are: Flash, ActionScript, Flex, AIR, PHP, Ruby on Rails. You can reach me at: tusharwadekar[at]gmail[dot]com Thank you! Tushar
This entry was posted in ActionScript3, AS3, components, Flex. Bookmark the permalink.

5 Responses to Flex – Double Click to edit functionality for List Control

  1. kamel says:

    thanks tons !

  2. Neil Kolban says:

    Awesome posting … your recipe worked perfectly. Thank you!!

  3. Isabel says:

    Thank you! This is, what I have searched for… but there is something, what I do not understand:

    After “EditEnd” the key control with up and down arrow to navigate in the list is lost. You have to click once more an item to use it again.

    Could you help me to get this “navigate-with-key-feature” back without to click once more an item???

    Best regards,

  4. Kojo says:

    Thank you kindly! This works GREAT.

  5. bLb says:

    Works fine thanks!


    private function onItemEditEnd(event:ListEvent):void {
    myList = false;
    myList.setFocus() ;

    Not perfect but do the trick :-)

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