Using the itemDoubleClick event to open nodes in a Flex Tree control

by Peter deHaan on November 29, 2007

in Tree

The following example shows how you can use the itemDoubleClick event to open the selected Tree node in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/29/using-the-itemdoubleclick-event-to-open-nodes-in-a-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;

            private function tree_itemDoubleClick(evt:ListEvent):void {
                var node:XML = tree.selectedItem as XML;
                var isOpen:Boolean = tree.isItemOpen(node);
                tree.expandItem(node, !isOpen);
            }
        ]]>
    </mx:Script>

    <mx:XMLListCollection id="xmlListColl">
        <mx:source>
            <mx:XMLList>
                <node label="One">
                    <node label="One.1">
                        <node label="One.1.1">
                            <node label="One.1.1.1">
                                <node label="One.1.1.1.1" />
                            </node>
                        </node>
                    </node>
                    <node label="One.2" />
                    <node label="One.3" />
                </node>
                <node label="Two">
                    <node label="Two.1" />
                    <node label="Two.2" />
                    <node label="Two.3" />
                </node>
                <node label="Three" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="doubleClickEnabled:"
                labelPlacement="left"
                selected="true" />
    </mx:ApplicationControlBar>

    <mx:Tree id="tree"
            dataProvider="{xmlListColl}"
            labelField="@label"
            width="250"
            rowCount="6"
            doubleClickEnabled="{checkBox.selected}"
            itemDoubleClick="tree_itemDoubleClick(event);"
            showScrollTips="true" />

</mx:Application>

View source is enabled in the following example.

{ 3 comments… read them below or add one }

1 razor7 December 6, 2007 at 7:24 am

Hello, i have this ree component in my app, but if I double click on ot, i loose the easi9ng animation function… Any suggestion?

AS3 function

private function treeItemClick(event:ListEvent):void {
	var node:XML = arbolCategorias.selectedItem as XML;
	var isOpen:Boolean = arbolCategorias.isItemOpen(node);
	arbolCategorias.expandItem(node, !isOpen);
}

Thanks in advise

Reply

2 peterd December 6, 2007 at 8:26 am

razor7,

Try passing a third parameter to the expandItem() method and setting it to true, like this:

arbolCategorias.expandItem(node, !isOpen, true);

For more information on the expandItem() method, see the Tree.expandItem() documentation for Flex 3 beta.

Peter

Reply

3 Moyeha February 1, 2010 at 1:22 pm

itemDoubleClick event doesn’t work in firefox 3,6 Mac 10,5,8

Reply

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: