Using DataGrid headerRenderer

I helped a friend of mine with a project of his recently and we were having some problems with the DataGridColumn’s headerRenderer property. We finally got it working but I thought that I’ll post the solution so that others won’t waste hours with this.

One more thing that I’d like to mention before I post the source files and a simple example to demonstrate the final result: DON’T USE FLEX 2 !!! UPGRADE TO FLEX 3 !!! During this project, I was using Flex 3 and my friend was using Flex 2… All that I can say is that the experience was horrible !!! I got the thing working in Flex 3 in no time but Flex 2… huh, now that was a pain in the butt. I finally ended up redoing the whole thing in Flex 2 so I can sort out the stupid errors Flex 2 was throwing at us about “you can’t use Binding for static variables” ( which I couldn’t remember being so… but it seems that my memory was playing tricks on me ) and other really annoying bugs ( example: the area beneath the arrow was a “dead spot”, so we ended up wrapping the Image and Label in a second HBox component which we have set as the hitArea for the main HBox component… really weird. ).

Again, DON’T USE FLEX 2, sell your car, your socks or whatever and get your hands on FLEX 3 ( It’s totally worth it ) !!! The example itself is simple, we replaced the header with a HBox custom component which has an Image component inside of it and a Label to display some text. The goal was to change the arrow from UP to DOWN on each header click, simple but it turned out to be quite frustrating .

Ok, enough of that, source files can be found here: DataGrid Header Rendering

And here’s the final result too ( obviously, I “scaled it down” because the project itself was way bigger and we obviously wasn’t allowed to use it for other purposes or post it’s source code ):

EDIT: This method only works for the simple DataGrid component. If you want it to work with multiple sorting and you go with the AdvancedDataGrid component then you must rethink the solution, otherwise all your headers will always display the same UP or DOWN arrow ( due to the static counter variable I’ve used to alternate between the UP and DOWN arrow ).