Yesterday I wasted an hour or so debugging a Flex itemRenderer that I was using to display an image instead of a value in a DataGrid column. The renderer had to simply pick one of six images based on the column value, and so it contained a single tag and a function that set the Image source dynamically. And then I called that function on the renderer’s creationComplete event.
Simple enough. Except that the wrong images were sometimes being displayed, the column had the right data, but the code used to select the image seemed to sometimes pick the wrong image. And what it picked seem to change each time I scrolled the DataGrid up and down!
I actually ran into a very similar issue with a TileList renderer a few weeks ago, but then I had no time to figure out the cause, and so I hacked a workaround. But this time, having been bitten by the same issue twice, I had to find out what was going on.
And what I discovered (by using traces and alerts) is that the creationComplete event does not get fired as I had expected. Rather, it seemed to fire only occasionally, and not once per DataGrid row, and so my image selection function was not being executed as expected.
Once I had figured out the problem I searched the docs for any info on renderers and creationComplete, and found this page. And sure enough, “Flex might reuse an instance of the item renderer or item editor, a reused instance of an item renderer or item editor does not redispatch the creationComplete event”. Well, that explained it.
The right way to do what I wanted is to trap the dataChange event instead of creationComplete, as “Flex dispatches the dataChange event every time the data property changes”.
And so I am posting this for my own future reference, just to make sure I don’t run into it a third time.