Flex tree expand and collapse

Question

I have created a tree with a custom treeitemrenderer where I have added a textinput box next to each label. My data provider is an ArrayCollection.

When I enter value in the input box, I can see the value fine as I expand or collapse the tree using the disclousure arrow. There is a strange issue when I try to expand and collapse tree from the mxml page with a button click to expand and collapse tree using the following code.

The problem is as I expand or collapse tree, the values I entered in the input boxes appear to be moving.

For example, I have entered 15 in input box 1. When I expand and collapse tree, 15 moves to another input box, and moves to another, and then it moves back to where it was entered as I keep expanding and collapsing the tree. I am still learning Flex. I am not sure what is happening, it is something to do with arraycollection.

Any help would be greatly appreciated. Thanks.

private function expandTree():void{ 
  for (var i:int = 0; i < thisTree.dataProvider.length; i ++){ 
     thisTree.expandChildrenOf(thisTree.dataProvider[i], true) 
  } 
} 

private function collapseTree():void{ 
  for (var i:int = 0; i < thisTree.dataProvider.length; i ++){ 
       thisTree.expandChildrenOf(thisTree.dataProvider[i], false) 
  } 
} 

Answer 1

Flex item renderers are recycled, which is what is causing your data to walk like this. In your item renderer, I generally find it is useful to cast your data to a bindable value object and override the setter for data.

[Bindable]
private var myBindableValueObject:MyBindableValueObject;

override public function set data(v:Object):void
{
    if(v == data)
        return;
    myBindableValueObject = v as MyBindableValueObject;
    super.data = value;
    validateNow();
}

You will need to bind the properties of the text input and labels to values in the value object. This will make sure the proper values are displayed at the appropriate location. Using this approach should eliminate the oddities that you are experiencing.

Answer 2

I tried as you suggested but I don't see any changes. Not sure I was able to follow your suggestion. Here is the code. Thanks.

package
{ 
    import mx.collections.*;
    import mx.controls.Label;
    import mx.controls.TextInput;
    import mx.controls.listClasses.*;
    import mx.controls.treeClasses.*;

    [Bindable] 
    public class TestSetupTreeItemRenderer extends TreeItemRenderer {

        [Bindable]
        public var _numQuestion:TextInput;
        private var _numOfQuestionText:Label;
        private var _listData:TreeListData;
        [Bindable]
        public var tItem:TestSetupTreeItem;

        public function TestSetupTreeItemRenderer():void {
            super();
            mouseEnabled = false;                        
        }

        override protected function createChildren():void {
            super.createChildren();
            _numQuestion = new TextInput();
            _numQuestion.text = "0"; //default

            _numQuestion.width = 45;
            _numQuestion.height = 20;                        
            _numQuestion.restrict = "0123456789";
            addChild(_numQuestion);

            _numOfQuestionText = new Label();
            _numOfQuestionText.width = 60;
            _numOfQuestionText.height = 22;
            addChild(_numOfQuestionText);
        }

        override public function set data(value:Object):void {           
            if(value == data)        
                return;
            tItem= value as TestSetupTreeItem;  
            super.data = value;
            validateNow();            
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth,unscaledHeight);            
            if(super.data){                
                tItem = super.data as TestSetupTreeItem;
                this.label.width = 150;
                this.label.truncateToFit(null);                          
                this.label.multiline = true;                
                this.label.wordWrap = true;

                var tld:TreeListData = TreeListData(super.listData);

                this._numOfQuestionText.text = "of " + tItem.totalQuestionCount;             
                this._numOfQuestionText.x = 300;
                this._numOfQuestionText.y = super.label.y;                

                this._numQuestion.x = 200;
                this._numQuestion.y = super.label.y;
                this._numQuestion.editable = true;


                tItem.desiredQuestionCount = this._numQuestion.text;
            }          
        } 
     }
}