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();">

<mx:Script>
<![CDATA[

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") {
return;
}
if (event.isDefaultPrevented()) {
return;
}
myList.editable = true;
myList.editedItemPosition = {columnIndex:0, rowIndex:event.rowIndex};
}

private function onItemEditEnd(event:ListEvent):void {
myList.editable = false;
}
]]>
</mx:Script>

<mx:ArrayCollection id="myData">
<mx:String>One</mx:String>
<mx:String>Two</mx:String>
<mx:String>Three</mx:String>
<mx:String>Four</mx:String>
</mx:ArrayCollection>

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

</mx:Application>

Click here for live example.

Let me know incase of any bugs…

About these ads

5 thoughts on “Flex – Double Click to edit functionality for List Control

  1. 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,
    Isabel

  2. Works fine thanks!

    @Isabel:

    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