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)"
    />