I suppose I’m not the only one who’s had problems with maintaining the state of a flex tree component upon updating the data. Recently I encountered the problem again and decided to crack this nut once and for all. As it turned out it was a lot easier than I had anticipated.

The Scenario
In this particular case I had a tree component displaying a hierarchical view of the pages of a web site. Upon making some certain changes, like dragging and dropping pages to reorder them I felt the need to change the order server-side and reload the data, rather than changing the order inside the dataProvider. I just like it that way better.

The Problem
So before I reloaded the data I saved the tree’s open items in a variable called openTreeItems and when I received the new data I tried to reset it by using tree.openItems = openTreeItems.
Nothing happened.

The Research
So I started doing some research and quickly discovered that to make this work the component uses the uid property and on updating the data for the dataProvider Flex reassigns new uid’s to the items in the collection. So, in short, Flex doesn’t recognize the items as the same items after the reload, because of the new uid values.

I encountered this article in the Flex 3 Help pages and started experimenting with creating custom classes that implemented the IUID interface and soon discovered that this was way to complicated for the (actually) quite simple problem I had. The pages in my database had unique ID’s! Why the h*ll couldn’t I use these values as the uid values instead of the built-in values?

The Solution
I suddenly had an idea: what if I simply add the uid property to my data serverside by using the id value I already had? This could be done in many ways but I chose to alter my SQL query like so:
“SELECT pages.id, pages.id uid, … FROM pages…”. This way the value would be passed on into Flex the same way as all the other values.

And, voilà, it worked!
After this tiny alteration of my SQL query Flex recognized my items as the ones saved in the openTreeItems variable and when using tree.invalidateList() before the update and tree.validateNow() after the update there isn’t even a flicker upon updating the data. Sweetness!

Hope this helps anyone that has had the same problem.