apache-flexflex-spark

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


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.


Solution

  • 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">