Header Ad

Wednesday, April 4, 2012

Flex Tree Control - how to set Tree control LABEL as CLICKABLE?

The following is sample code to make Tree Control Node label as clickable.

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

        private function tree_itemClick(evt:ListEvent):void {
            var item:Object = Tree(evt.currentTarget).selectedItem;
            if (tree.dataDescriptor.isBranch(item)) {
                tree.expandItem(item, !tree.isItemOpen(item), true);
            }
        }

]]>
</mx:Script>

<mx:XML id="dp">
    <root>
        <folder label="Main Item">
            <folder label="Sub Item1">
                <item label="Sub Item11" />
                <item label="Sub Item21" />
                <item label="Sub Item31" />
                <item label="Sub Item41" />
                <item label="Sub Item51" />
            </folder>
            <item label="Sub Item2" />
            <item label="Sub Item3" />
        </folder>
    </root>
</mx:XML>

<mx:Tree id="tree" dataProvider="{dp}" showRoot="false"  labelField="@label" width="300" rowCount="6"
        itemClick="tree_itemClick(event);" />

In the above code, if we observe "itemClick" has been added to "tree" component. So, if we click on LABEL, itemClick event will be fired. This will call the "tree_itemClick" function, where it has the code to expand the node item.

No comments: