Opening branches by clicking rows in a Tree control in Flex

The following example shows how you can expand/collapse branches in a Flex Tree control by clicking on the row instead of having to click on the disclosure/arrow icon.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/05/opening-branches-by-clicking-rows-in-a-tree-control-in-flex/ -->
<mx:Application name="Tree_itemClick_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <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);
                }
            }
 
            private function tree_labelFunc(item:XML):String {
                var children:ICollectionView;
                var suffix:String = "";
                if (tree.dataDescriptor.isBranch(item)) {
                    children = tree.dataDescriptor.getChildren(item);
                    suffix = " (" + children.length + ")";
                }
                return item[tree.labelField] + suffix;
            }
        ]]>
    </mx:Script>
 
    <mx:XML id="dp">
        <root>
            <folder label="One">
                <folder label="One.A">
                    <item label="One.A.1" />
                    <item label="One.A.2" />
                    <item label="One.A.3" />
                    <item label="One.A.4" />
                    <item label="One.A.5" />
                </folder>
                <item label="One.1" />
                <item label="One.2" />
            </folder>
            <folder label="Two">
                <item label="Two.1" />
                <folder label="Two.A">
                    <item label="Two.A.1" />
                    <item label="Two.A.2" />
                </folder>
            </folder>
        </root>
    </mx:XML>
 
    <mx:Tree id="tree"
            dataProvider="{dp}"
            showRoot="false"
            labelField="@label"
            labelFunction="tree_labelFunc"
            width="300"
            rowCount="6"
            itemClick="tree_itemClick(event);" />
 
</mx:Application>

View source is enabled in the following example.

29 thoughts on “Opening branches by clicking rows in a Tree control in Flex

  1. OMG have been trying to find this for ever. Would be nice to see a XML populate this navigation with subcategories, would be killer!

  2. Thanks.

    Just a note – it looks like the itemOpen and itemClose events don’t get dispatched when you click on the row (only when you click on the arrow), so you may need to dispatch them manually:

    private function tree_itemClick(evt:ListEvent):void {
        var item:Object = Tree(evt.currentTarget).selectedItem;
        var eventType:String;
        if (tree.dataDescriptor.isBranch(item)){
            tree.expandItem(item, !tree.isItemOpen(item), true);
            // Clicking on anything other than the arrow doesn't dispatch the
            // normal Tree events, so manually dispatch...
            eventType = (tree.isItemOpen(item)) ? TreeEvent.ITEM_OPEN : TreeEvent.ITEM_CLOSE;
            var event:TreeEvent = new TreeEvent(eventType);
            event.item = item;
            tree.dispatchEvent(event);
        }
    }
    
  3. Is there a way to keep the folders from getting selected with the highlight. They can highlight on rollover, just not persist the highlight on click.

  4. Dont work, for dispatch this event you have to use the internal function dispatchTreeEvent!

    1 – import mx.core.mx_internal;
    2 – use namespace mx_internal;
    3 – dispatchTreeEvent(TreeEvent.ITEM_OPENING,
    item, //item
    this, //renderer
    evt, //trigger
    !isItemOpen(item), //opening
    true, //animate
    true) //dispatch

    mx_internal allow to access to ‘private’ members and is very usefull (another example is for the VideoDisplay to enable the smoothing)

  5. Is it possible to make wordwrape for TExt…Or is it possible ot make variable row height with tree control….

  6. Great work!

    Could you please tell me how to handle the item_click stuff in reference to an ADVANCEDDATAGRID.

    Many thanks in advance.

    Gerry

  7. Hi all.

    For those who want to apply the same logic to an ADG, here’s what I did (I’m an amateur, so be gentle if the coding turns out to contain woeful inefficiency)…

    private function adg_itemClick(evt:ListEvent):void {
        var item:Object = AdvancedDataGrid(evt.currentTarget).selectedItem;
        totList.expandItem(item, !totList.isItemOpen(item), true);
    }
    

    It worked perfectly. I got rid of the if test because I couldn’t find the adg crollary to the dataDescriptor.isBranch bizzo. (‘Bizzo’ is an Australian technical term, meaning ‘something I dont really understand’… I understand if you aren’t familiar with it)

    ‘totList’ is the adg to which this function is applied as an itemClick.

    As usual, flexexamples has given me something that solves a problem – with my role being to find out how to bash the example to fit my project.

    Cheerio

    GT
    France

    PS sorry for not uttingthe code in acode frame – I can’t see how to do that.

  8. Just to confirm … with the AdvancedDataGrid not checking if the clicked item is a branch doesn’t seem to matter. The only thing that confused me is the AdvancedDataGridItemSelectEvent in FB3 that the compiler doesn’t like … you need to use a standard ListEvent … ho-hum! Also, while I’m at it … if you’re wondering how to assign different Item renderers for different branches look in the Flex help at the <mx:rendererProviders> tag … this was very handy!

  9. Is there a way to get the actual item from a itemRollover event when using an advanced datagrid that is grouped from a flat arraycollection? With the original datagrid you could simply get the item using this method on the event:

    event.currentTarget.dataProvider.getItemAt(event.rowIndex))

  10. About that close/open event dispatching, look at fourth parameter of expandItem method (dispatchEvent:Boolean = false). Set it to true and it will work just fine.

  11. For ADG u need to use the ADGGroupItemRenderer:

    public class MyAdvancedDataGridGroupItemRenderer extends AdvancedDataGridGroupItemRenderer {
        private var _listOwner:AdvancedDataGrid;
        private var _listData:AdvancedDataGridListData;
    
        public function MyAdvancedDataGridGroupItemRenderer(){
            super();
        }
    
        override public function set listData(value:BaseListData):void {
            super.listData = value;
            if (value) {
                _listData = value as AdvancedDataGridListData;
                _listOwner = value.owner as AdvancedDataGrid;
    
                label.addEventListener(MouseEvent.MOUSE_OVER,
                    function(event:MouseEvent):void {
                        _listOwner.contextMenu = myContextMenu();
                        event.stopImmediatePropagation();
                    });
    
                label.addEventListener(MouseEvent.MOUSE_OUT,
                    function(event:MouseEvent):void {
                        _listOwner.contextMenu = null;
                        event.stopImmediatePropagation();
                    });
    
                addEventListener( MouseEvent.CLICK,
                    function(event:MouseEvent):void {
                        _listOwner.expandChildrenOf(_listData.item, !_listData.open);
                        event.stopImmediatePropagation();
                    });
            }
        }
    
        private function myContextMenu():ContextMenu {
            var contextMenu:ContextMenu = new ContextMenu();
            contextMenu.hideBuiltInItems();
    
            var expandCollapseItem:ContextMenuItem = new ContextMenuItem("Expand/Collapse Item",false,true,true);
            expandCollapseItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,
                function(event:ContextMenuEvent):void {
                    _listOwner.expandItem( _listData.item, !_listData.open, false, false,null);
                    event.stopImmediatePropagation();
                });
            contextMenu.customItems.push(expandCollapseItem);
    
            var expandCollapseChildrenOf:ContextMenuItem = new ContextMenuItem("Expand/Collapse Children Of",false,true,true);
            expandCollapseChildrenOf.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,
                function(event:ContextMenuEvent):void {
                    _listOwner.expandChildrenOf(_listData.item, !_listData.open);
                    event.stopImmediatePropagation();
                });
            contextMenu.customItems.push(expandCollapseChildrenOf);
            /**
             *     collapseAll/expandAll  is causing
             *     Error #1502: A script has executed for
             *     longer than the default timeout period of 15 seconds.
             */
            //            var collapseAllMenuItem:ContextMenuItem = new ContextMenuItem("Collapse All Groups",true,true,true);
            //            collapseAllMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,
            //                function(event:ContextMenuEvent):void {
            //                    _listOwner.collapseAll();
            //                });
            //            contextMenu.customItems.push(collapseAllMenuItem);
            //
            //            var expandAllMenuItem:ContextMenuItem = new ContextMenuItem("Expand All Groups",false,true,true);
            //            expandAllMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,
            //                function(event:ContextMenuEvent):void {
            //                    _listOwner.expandAll();
            //                });
            //            contextMenu.customItems.push(expandAllMenuItem);
    
            return contextMenu;
        }
    
    1. Hey Vijay,
      I understand this is a very old post for you. But I was trying to implement your idea for an ADG but in vain.

      Can you please explain your code or provide me a project file ofcorse alongwith the whole working code?

      Bhargav

  12. Hi,

    Nice example. Can you explain how to display only the nodes we want ?

    For example, in your XML, you have “folder” nodes and “item” nodes, and I would like to only show “folder” nodes.

    Is it possible ?

    Thanks,

    Sam

  13. Hi,

    I have been trying the same trick for FileSystemTree in AIR but it does not work.

    When I click on the row, I see the triangle looking down. I click again, it goes back to its initial position. I trace if the branch is open and get false/true so no problem there. However, the tree structure does not update itself. Moreover, if I happen to click on the triangle first, then everything works smoothly. There must be something about disclosure events, right?

  14. Hi, very useful example indeed.
    I am a newbie so my question may sound stupid, what if you want to point to a specific object (aka folder) and not the whole tree?

    Thanks.

Comments are closed.