How can I programmatically enter the edit mode in a Tree Control inside a Flex Application

Question

I have a Tree Control inside my Flex Application which I want to edit on a doubleclick on a tree item. I found the properties doubleClickEnabled="true", doubleClick="startEditMode()", and editable="true". With these functions I can detect a double click and I can change the editable property to true based on a double click.

The problem is that after I double clicked on a Item i have to click once more to really enter the edit mode. That doesn't seem to be intuitive at all...

Does anybody know the solution on that problem?

Thanks Markus

Answer 1

Makrus,

Check out the solution posted at:

http://www.sephiroth.it/weblog/archives/2009/12/flex_3_tree_double-click_to_edit.php

Should be just what you are looking for!

-David

Answer 2

A List (super class of Tree ) enters edit mode when the itemRenderer is clicked with its editable set to true . In your case, the editable is false, when you click on it - it is set to true only in the doubleClick event handler. So this is expected behavior, though not desired in this case.

Try this: Dispatch a click with the clicked itemRenderer from the dobleClick event handler after setting editable to true .

clickedItemRenderer.dispatchEvent(new MouseEvent(MouseEvent.CLICK));

I haven't tested this, but I think this might make flex to believe that the item has been clicked again after setting editable to true. If this doesn't work, post a working code so that we can tweak with it and try to come up with a solution.

Answer 3

http://tush.wordpress.com/2008/10/06/flex-double-click-to-edit-functionality-for-list-control/

This works like a charm... just tried it.

Answer 4

This is the solution that work for me:

        private var ignoreEditing:Boolean = true;
        protected function doubleClickHandler(event: MouseEvent ):void
        {
            ignoreEditing = false;
        }

        protected function itemEditBeginningHandler(event:ListEvent):void
        {
            if(ignoreEditing){
                event.preventDefault();
            }
            else{
                ignoreEditing = true;
            }
        }

---

<mx:Tree
    doubleClickEnabled="true" 
    editable="true"
    itemEditBegin="itemEditBeginningHandler(event)" 
    doubleClick="doubleClickHandler(event)"
    />