CustomRowColorDataGrid component

Posted At : October 3, 2006 11:25 PM | Posted By : Mike Nimer
Related Categories: Flex

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 (6) |

Print |

Send |

del.icio.us |

Digg It! |

Linking Blogs | 25636 Views

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)

[Add Comment]

Hi

Thanks for providing the source. It helped me to modify DG further.

# Posted By Nick | 2/10/08 9:06 AM

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

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

Thank you so much for this. I works great and really
saved me time!

# Posted By David | 4/8/08 6:27 PM

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

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

[Add Comment]