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>

8 thoughts on “Setting the header colors on the DataGrid control in Flex

  1. hi .. i follow ur blog everyday ..its like part of routine now ..so a big thanks for writing up all nice codes … can u plz write an code showing how to dynamically change the color of any row in a datagrid ???? ( i have already asked u this in other post of urs but that one is quite old so i thought i wud ask this in a newer one so that the chances of u reading it are increased :) … i think u do read all the comments but i thought i better not take chances ) …

    thanks in advance and keep up the good work :)

  2. yogesh gaur,

    Yes, I try and read every comment, but don’t always have time/knowledge to reply to each question.
    I haven’t played much with custom renderers and changing background colors in a DataGrid or DataGridColumn, but my hella-smart co-worker Alex Harui’s blog is a really great starting point. For example, check out his “Thinking About Item Renderers” blog post, and specifically check out the BackgroundColor in Item Renderers and BackgroundColor Changes When Data Changes sections.

    Happy Flexing,
    Peter

  3. Hi Peter,

    Is there anyways to set a particular header with a gradient color, my requirement is to add the gradient color to a datagrid column which is sorted….any suggestions

      1. this is for to color the background of column in datagrid
        var col:AdvancedDataGridColumn = new AdvancedDataGridColumn();

        col.setStyle(‘backgroundColor’,0xc6d8ff);

Comments are closed.