Setting the header colors on the DataGrid control in Flex

The following example shows how you can set the header colors on a Flex DataGrid control by setting the headerColors style to an array of two colors to use for the background gradient.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/22/setting-the-header-colors-on-the-datagrid-control-in-flex/ -->
<mx:Application name="DataGrid_headerColors_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object c1="1. One" c2="1. Two" c3="1. Three" />
        <mx:Object c1="2. One" c2="2. Two" c3="2. Three" />
        <mx:Object c1="3. One" c2="3. Two" c3="3. Three" />
        <mx:Object c1="4. One" c2="4. Two" c3="4. Three" />
        <mx:Object c1="5. One" c2="5. Two" c3="5. Three" />
        <mx:Object c1="6. One" c2="6. Two" c3="6. Three" />
        <mx:Object c1="7. One" c2="7. Two" c3="7. Three" />
        <mx:Object c1="8. One" c2="8. Two" c3="8. Three" />
        <mx:Object c1="9. One" c2="9. Two" c3="9. Three" />
    </mx:Array>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arr}"
            headerColors="[red, blue]"
            verticalScrollPolicy="on">
        <mx:columns>
            <mx:DataGridColumn dataField="c1" headerText="Column 1" />
            <mx:DataGridColumn dataField="c2" headerText="Column 2" />
            <mx:DataGridColumn dataField="c3" headerText="Column 3" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

You can also set the headerColors style in an external .CSS file or <Style> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/22/setting-the-header-colors-on-the-datagrid-control-in-flex/ -->
<mx:Application name="DataGrid_headerColors_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        DataGrid {
            headerColors: red, blue;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object c1="1. One" c2="1. Two" c3="1. Three" />
        <mx:Object c1="2. One" c2="2. Two" c3="2. Three" />
        <mx:Object c1="3. One" c2="3. Two" c3="3. Three" />
        <mx:Object c1="4. One" c2="4. Two" c3="4. Three" />
        <mx:Object c1="5. One" c2="5. Two" c3="5. Three" />
        <mx:Object c1="6. One" c2="6. Two" c3="6. Three" />
        <mx:Object c1="7. One" c2="7. Two" c3="7. Three" />
        <mx:Object c1="8. One" c2="8. Two" c3="8. Three" />
        <mx:Object c1="9. One" c2="9. Two" c3="9. Three" />
    </mx:Array>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arr}"
            verticalScrollPolicy="on">
        <mx:columns>
            <mx:DataGridColumn dataField="c1" headerText="Column 1" />
            <mx:DataGridColumn dataField="c2" headerText="Column 2" />
            <mx:DataGridColumn dataField="c3" headerText="Column 3" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

Or, you can set the headerColors style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/22/setting-the-header-colors-on-the-datagrid-control-in-flex/ -->
<mx:Application name="DataGrid_headerColors_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function btn_click(evt:Event):void {
                dataGrid.setStyle("headerColors", ["red", "blue"]);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object c1="1. One" c2="1. Two" c3="1. Three" />
        <mx:Object c1="2. One" c2="2. Two" c3="2. Three" />
        <mx:Object c1="3. One" c2="3. Two" c3="3. Three" />
        <mx:Object c1="4. One" c2="4. Two" c3="4. Three" />
        <mx:Object c1="5. One" c2="5. Two" c3="5. Three" />
        <mx:Object c1="6. One" c2="6. Two" c3="6. Three" />
        <mx:Object c1="7. One" c2="7. Two" c3="7. Three" />
        <mx:Object c1="8. One" c2="8. Two" c3="8. Three" />
        <mx:Object c1="9. One" c2="9. Two" c3="9. Three" />
    </mx:Array>

    <mx:Button label="Set headerColors"
            click="btn_click(event);" />

    <mx:DataGrid id="dataGrid"
            dataProvider="{arr}"
            verticalScrollPolicy="on">
        <mx:columns>
            <mx:DataGridColumn dataField="c1" headerText="Column 1" />
            <mx:DataGridColumn dataField="c2" headerText="Column 2" />
            <mx:DataGridColumn dataField="c3" headerText="Column 3" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

Also, if you wanted to use hex values instead of named values, you could use any of the following syntaxes.
MXML (inline):

<mx:DataGrid headerColors="[#FF0000, 0x0000FF]">

MXML (tags):

<mx:DataGrid id="dataGrid"gt;
    <mx:headerColors>
        <mx:String>#FF0000</mx:String>
        <mx:String>0x0000FF</mx:String>
    </mx:headerColors>
</mx:DataGrid>

CSS:

<mx:Style>
    DataGrid {
        headerColors: #FF0000, '0x0000FF';
    }
</mx:Style>

ActionScript:

<mx:Script>
    <![CDATA[
        private function btn_click(evt:Event):void {
            dataGrid.setStyle("headerColors", ["#FF0000", 0x0000FF]);
        }
    ]]>
</mx:Script>

If you wanted a solid/flat fill instead of a linear gradient fill, simply set both colors to the same value, as seen in the following example:

<mx:Style>
    DataGrid {
        headerColors: haloBlue, haloBlue;
    }
</mx:Style>

Tagged as: headerColors