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

Print |

Send |

del.icio.us |

Digg It! |

Linking Blogs | 42907 Views

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

[Add Comment] [Subscribe to Comments]

Hi

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

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

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

Thanks. That was very helpful.

I have used this in one of the applications that I created.
But I want to implment the functionality that if I doubleclick on any of the data Grid columns then the background color of all columns should again set back
to white.

I have been trying to do this but have been unsuccessful so far.

Help Please.

Thanks,
Ruby

# Posted By Ruby | 10/17/08 7:41 PM

Thanks Mike.

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

# Posted By Ruby | 10/17/08 7:46 PM

Hi,

Could you please let me know how can I change background color of row in an AdvancedGrid which has HierarchicalData as its dataprovider.

An example would be great.

# Posted By Vivek | 11/21/08 3:34 AM

I am so happy to see this code for background color of Dg.
change for DG. Great Work.

# Posted By fortest | 3/19/09 9:40 AM

I changed the functionality to be able to use an ArrayCollection, XMLListCollection, Array, XMLList, or XML.

override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void
{
if (_rowColorFunction != null)
{
var dp:ListCollectionView;
if (dataProvider is ArrayCollection || dataProvider is Array)
{
if (dataProvider is ArrayCollection)
dp = dataProvider as ListCollectionView;
else if (dataProvider is Array)
dp = new ArrayCollection(dataProvider as Array);
}
else if (dataProvider is XMLListCollection || dataProvider is XMLList || dataProvider is XML)
{
if (dataProvider is XMLListCollection)
dp = dataProvider as ListCollectionView;
else if (dataProvider is XMLList)
dp = new XMLListCollection(dataProvider as XMLList);
else if (dataProvider is XML)
dp = new XMLListCollection(new XMLList(dataProvider as XML));
}

if (dataIndex < dp.length)
{
var item:Object = dp.getItemAt(dataIndex);
color = this.rowColorFunction(item, color);
}
dp = null;
}
super.drawRowBackground(s, rowIndex, y, height, color, dataIndex);
}

# Posted By Nathan D | 3/28/09 4:34 AM

[Add Comment]