So the other day I was using a DataGrid to show a data-set from an ArrayCollection, and I thought a great visual cue would be to highlight specific rows based upon the data like this:
But after digging and searching through the docs, discovered to my surprise that the DataGrid component did not have this capability. So I did what every good developer does first, and started Googling, expecting to find someone who had faced this problem and solved it.
Although I did find several blog articles talking about changing the background of a DataGrid, usually using CSS, none of them were the magic bullet that I was looking for (cut and paste.) But I did find reference to the protected function drawRowBackground in the DataGrid class. After looking over this function in DataGrid.as I decided this was my ticket to getting the datagrid I wanted.
So I created the custom component ColoredDataGrid that extends DataGrid. I created an override function for drawRowBackground to slip in my custom row color.
So here’s how you use it:ColoredDataGrid adds two new properties to DataGrid: rowColorField and rowColorFunction.
rowColorField is like the dataField property and takes a String that references the name of a property on the row data object that contains a color value. It’s best to be in the form of 0xFFFFFF, but pretty much anything that can convert to a uint will work.
rowColorFunction is like labelFunction and takes a reference to a Function that should have a signature like this:
myRowColorFunction(item:Object, defaultColor:uint):uint
item is the row’s data object for use in calculating the color.
defaultColor is the color that would have been used. This is useful when your datagrid has alternating row colors (which they will by default) and you would like to use that variation in the alternating color in your calculated color also.
Look here for a live example of the ColoredDataGrid being used. (The source is published, so right click and select “View Source”.)
And here you can download the source for ColoredDataGrid.
Let me know if you like it.
February 15th, 2008 at 4:21 pm
Came across a similar implementation by Mike Nimer today.
You can check it out here: http://blog.mikenimer.com/index.cfm/2006/10/3/BackgroundRowColor-DataGrid-component
March 6th, 2008 at 4:13 am
I tried implementing this but with my larger datasets (even starting with 10×100’s) this was far to slow. I researched a bit more and used and override on drawRowBackgrounds instead. Another benefit of using drawRowBackgrounds is the support for variableRowHeight options. I noticed when just doing drawRowBackground that my variableRowHeight was being lost. Anyway, just thought I’d pass on my findings
September 28th, 2008 at 1:27 am
Hello,
This is an very interesting example. It will be a complete example with
- a row total which indicate the total of sold column and the total of the total column.
- and changing the color of each row in the total column if the value is negativ.
Best Regards
October 17th, 2008 at 2:45 pm
Thanks.
I have used this feature in one of the applications that I have created.
But I was trying to extend this so that when i double click on any row then the background color should be again set to white.
However, I have been unsuccessful in doing so.
Helpp Please.
Thanks,
Ruby
January 23rd, 2009 at 12:35 pm
Is there a way to change the Font Color as well. When I change the row color to a darker background color, I need the font color to change to a lighter color. For example: red background, white font color.
Thanks,
Dean
December 11th, 2009 at 12:29 pm
Thanks, this helped me out today in more than one way.
1. Gave me the confidence to make a custom DataGrid to resolve an issue I was having that appeared to be out of the usual DataGrid functionality
2. View Source on your live example showed me why I was getting an error on my columns property (silly mistake, but needed your code to point the way)
Still not 100%, but just about there on this one!
Thanks!