Expand the tree by default

Question

Hi,
I have a tree component  in my Application and I have given the dataprovider as XMLListCollection. I would like to have the entire tree as expanded mode(all children) by default. To achieve this, I tried expandItem() method but I couldn't see the entire tree as expanded when I load my application.
Any solution will be helpful for me a lot!
Thanks in Advance,
Srinivasan S

Answer 1

A more elegant solution ( in my opinion ) would be to extend the Tree component and implement the desired behavior in a much nicer fashion. It is true that we already have expandChildrenOf(); method that is really great, but if we want to have a nice feature that instantaneously expands or collapses the whole tree more easily ( without having to rewrite the same conditions and who knows what each time we want such a functionality ) then I think that it would be much nicer to extend the Tree component, add the desired feature and start using that custom component instead.
Here's a fast example ( make sure to place this class into a "components" folder if you want to test it ):
package components
    import mx.controls.Tree;
    * Custom <code>Tree</code> class with custom behavior.
    public class ExpandableTree extends Tree
        * Flag telling if the tree is expanded or not.
        protected var _isExpanded:Boolean = false;
        * Constructor.
        public function ExpandableTree()
            super();
        * Used to expand or collapse the <code>Tree</code>.
        * @param value Flag telling if we should expand or collapse the <code>Tree</code>.
        protected function expandCollapseTree(value:Boolean):void
            // Return if there's no data to expand or collapse.
            if (this.dataProvider == null)
                // The flag should be "false" if no expanding has occurred.
                _isExpanded = false;
                return;
            // Expand or collapse the children.
            this.expandChildrenOf(this.dataProvider[0], value);
        //  Overridden methods
        * @inheritDoc
        override protected function updateDisplayList(w:Number, h:Number):void
            // Expand or collapse the Tree.
            expandCollapseTree(_isExpanded);
            super.updateDisplayList(w, h);
        //  Setters and getters
        * Set a flag telling if the <code>Tree</code> should be expanded or callapsed.
        public function set expanded(value:Boolean):void
            // Make sure that the passed value is not the current state.
            if (value == _isExpanded) return;
            _isExpanded = value;
            // Invalidate the display list to signal the change.
            this.invalidateDisplayList();
        * Returns the current state of the <code>Tree</code>.
        public function get expanded():Boolean
            return _isExpanded;
Obviously, you can always extend this "skeleton component" and add even more features. Also, there's another fast example to demonstrate the usage of the component I've just posted above ( it's really simple ):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx                    = "http://www.adobe.com/2006/mxml"
    xmlns:components            = "components.*"
    backgroundColor             = "0xFFFFFF"
    backgroundGradientColors    = "[0xFFFFFF, 0xFFFFFF]"
    layout                      = "vertical">
    <mx:XMLList id="treeData">
        <node label="Mail Box">
            <node label="Inbox">
                <node label="Marketing"/>
                <node label="Product Management"/>
                <node label="Personal"/>
            </node>
            <node label="Outbox">
                <node label="Professional"/>
                <node label="Personal"/>
                <node label="Outbox">
                    <node label="Professional"/>
                    <node label="Personal"/>
                </node>
            </node>
            <node label="Spam"/>
            <node label="Sent"/>
        </node>   
    </mx:XMLList>
    <components:ExpandableTree
        id              = "cmpExpandableTree"
        width           = "400"
        height          = "300"
        showRoot        = "false"
        expanded        = "true"
        labelField      = "@label"
        dataProvider    = "{treeData}"/>
    <mx:HBox width="400">
        <mx:Button
            label       = "Collapse"
            width       = "100%"
            click       = "cmpExpandableTree.expanded = false;"/>
        <mx:Button
            label       = "Expand"
            width       = "100%"
            click       = "cmpExpandableTree.expanded = true;"/>
    </mx:HBox>
</mx:Application>
So, this would be the "neater solution" ( in my opinion ). But simply using expandChildrenOf(); and passing in the item from where you want to rest of the nodes to expand is just as valid.
With kind regards,
Barna Biro