Flex tree expand and collapse

apache-flextree

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) 
  } 
}

Best Answer

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.

Related Topic