CustomRowColorDataGrid component

In the last 2 projects I've worked on I've needed to change the background row color of items in the datagrid, based on values in the dataProvider.

However the flex DataGrid doesn't allow you to set the row color this way. Turns out in order to do this you need to extend the DataGrid and override the drawRowBackground() method and put your own logic in it. Not fun at all.

So to make it easier for myself, and you, I've abstracted this out in a way that make the new DataGrid re-usable, and I've added it to my growing collection of components that you can download from here.

[Download]

So the syntax to use this new grid is to write a new function, just like the ArrayCollections filterFunction. And the new DataGrid will call this function for every row it renders in the DataGrid, to get the right background row color.

The function signature needs to be this:

f(item:Object, defaultColor:uint):uint

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
   xmlns:mx="http://www.adobe.com/2006/mxml"
   xmlns:nimer="com.mikenimer.components.datagrid.*">

   
   
   <mx:Script>
      <![CDATA[
         import mx.collections.ArrayCollection;
         private function selectTypeColor(item:Object, color:uint):uint
         {
            if( item['type'] == "Warning" )
            {
               return 0xFFFF00;
            }
            else if( item['type'] == "Error" )
            {
               return 0xFF0033;
            }
            return color;
         }
      ]]>
   </mx:Script>

   
   <nimer:CustomRowColorDataGrid
      id="sampleGrid"
      rowColorFunction="selectTypeColor"
      width="100%" height="100%">

      
      <nimer:dataProvider>
         <mx:Array>
            <mx:Object type="Information" message="something good worked"/>
            <mx:Object type="Information" message="something else worked"/>
            <mx:Object type="Information" message="I like flex"/>
            <mx:Object type="Error" message="Opps, something didn't work."/>
            <mx:Object type="Warning" message="flex has a learning curve"/>
            <mx:Object type="Information" message="flex is fun"/>
         </mx:Array>
      </nimer:dataProvider>      
   </nimer:CustomRowColorDataGrid>
   
</mx:Application>

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Nick's Gravatar Hi

Thanks for providing the source. It helped me to modify DG further.
# Posted By Nick | 2/10/08 9:06 AM
Mac's Gravatar Mike, great work.

I only wish I had stumbled across this 5 months ago. I search around quite a bit to find this functionality and found only a few partially related implementations. So, of course I had to write my own.

You can see it here: <a href="http://www.macsims.com/blog/?p=20">http://...;

I took basically the same approach that you did in extending DataGrid and overriding drawRowBackground. Because I wanted mine to work with any collection, not just ArrayCollections, I used a cursor to access the collection. There a few other minor differences, but you can look at the code if you are interested.
# Posted By Mac | 2/15/08 7:42 PM
Alex's Gravatar Hi Mike,

is it possible to change background color of an individual cell, not the whole row?

Thanks,
Alex.
# Posted By Alex | 3/7/08 6:22 PM
David's Gravatar Thank you so much for this. I works great and really
saved me time!
# Posted By David | 4/8/08 6:27 PM
fun's Gravatar thanks! It's funny what I thought was a simple function turns out to be almost a simple function. I'm not looking for the exact same behavior as CF, I was just using it as a reference since it does have this ability.

I'm going to update the blog and my util function with your function, since it is more accurate.
# Posted By fun | 4/14/08 12:58 AM
Gold Prices Today's Gravatar I took basically the same approach that you did in extending DataGrid and overriding drawRowBackground. Because I wanted mine to work with any collection, not just ArrayCollections, I used a cursor to access the collection. There a few other minor differences, but you can look at the code if you are interested.
http://www.3cmicro.com/
# Posted By Gold Prices Today | 5/23/08 12:21 AM
BlogCFC was created by Raymond Camden. This blog is running version 5.9.001.