How to set the text color of a row in a Spark DataGrid

Question

I have had a lot of trouble with setting the row color and text color in Spark DataGrids more times than I can remember. This post shows how to set it.

Answer 1

To set the text styles on a grid item row we need to create a new DataGrid Item Renderer.

Unfortunately, when we create a new ItemRenderer in Flash Builder it only creates a bare bones ItemRenderer with only a label. By default it doesn't add any support for states.

To set the styles we need we need to create a new ItemRenderer with hover states and then set the color values for those states.

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                    xmlns:s="library://ns.adobe.com/flex/spark" 
                    xmlns:mx="library://ns.adobe.com/flex/mx" 
                    clipAndEnableScrolling="true">

    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="down" />
        <s:State name="selected" />
    </s:states>

    <s:Label id="labelDisplay" top="9" left="7"
             color.normal="#171515" 
             color.hovered="#FFFFFF" 
             color.down="#FFFFFF"
             color.selected="#FFFFFF"
             />

</s:GridItemRenderer>

We then need to point the DataGrid to our item renderer:

<s:DataGrid itemRenderer="view.renderers.AbstractDataGridItemRenderer">