Changing the background color of a row using itemRendererFunction in Spark

Changing the background color of a cell in a DataGrid is much easier, in my opinion, using the Spark architecture. The itemRenderer I am using is all mxml and uses the Rect graphic as the background. Here is the simple itemRenderer with a gray background and grayed out text.

<?xml version=”1.0″ encoding=”utf-8″?>
<s:GridItemRenderer xmlns:fx=”;
xmlns:mx=”library://” clipAndEnableScrolling=”true”>

override public function prepare(hasBeenRecycled:Boolean):void {
lblData.text = data[column.dataField]
<s:Rect top=”0″ bottom=”0″ right=”0″ left=”0″>
<s:SolidColor color=”#E0E0E0″ alpha=”0.5″/>
<s:Label id=”lblData” top=”9″ left=”7″ color=”0x505050″ alpha=”0.5″/>


Using itemRendererFunction, I am determining whether to use this custom itemRenderer with the gray background, or the DefaultGridItemRenderer. If the item is in stock, use the DefaultGridItemRenderer, if it is not, use the custom itemRenderer. My itemRenderer function looks like this:

private function product_itemRendererFunction(item:Object, column:GridColumn):ClassFactory {

return new ClassFactory(DefaultGridItemRenderer);
return new ClassFactory(OutOfStockItemRenderer);

Here are the files to download.

Sample Code: DataGrid_itemRendererFunctionExample.mxml, OutOfStockItemRenderer.mxml

Sample SWF: DataGrid_itemRendererFunctionExample.swf

9 responses

  1. From current Beta livedocs on GridItemRenderer’ prepare() method:

    “This method is not intended to be called directly, it’s called by the Grid implementation.” 😉

    It was hard to copy paste the code from your blog entry to Flash Builder AS editor, required global substitution of ” to “.

    Code samples from are good, but the presentation format can be improved as I’ve already had suggested.

    1. @JabbyPanda : This blog is just hosted on wordpress. They don’t allow plugins like the one you suggested, I think. I looked it up, really! Anyways, I had the intention to host this myself for quite some time. All the flex blogging I do is generally outside of work and I haven’t prioritized the task of hosting the blog. I just link to the examples and hope folks find them useful.

  2. To address the use of the prepare() method, I checked with our developers and they confirmed that overriding prepare() in a custom itemRenderer is the right thing to do. He mentioned:

    “What is probably confusing about the docs is the distinction between ‘calling’ a method and overriding it. An override changes what it means to call the method, which is what DataGrid does, not the developer.”

    1. DataGrid is undoubtedly is a complex component, and I am just started to look into new API…

      But, for this particular example, the plain old override of setter for “data” in custom ItemRenderer would do the trick, no need to rely on new public API.

      Actually, from a bird point of view, when we set “data” on Spark’s DataItemRenderer, almost immediately we call public “prepare” method a few lines in code below (etc classes GridLayout, DataGridEditor…)

      IMHO, the current version of is never calling “prepare” method on ItemRenderer, I’ve just did a global search for this keyword – although this may change in the future versions of Flex SDK.

      1. When overriding the data setter, the data may be set multiple times causing your code in the setter to run extra times if the developer is not careful.

        We call prepare once per renderer during validation in This was a bug recently fixed and the updated version of the SDK is available on our opensource site

  3. Thanks for the tips. Just as an additional observation, in prepare you should probably check the column for a labelFunction and call this before setting the label text.

  4. […] Joan Lafferty. She posted a number of tips for using the new Spark DataGrid this week including how to change the background color of a row using itemRendererFunction, how to use a CheckBox and how to outline the selected […]

  5. Thanks Joan – this saved me a ton of work!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: