Flex Examples
The following example shows how you can set the text color of a Flex DataGrid control’s column header text by setting the headerStyleName and color styles.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/23/setting-the-column-header-text-color-on-a-datagrid-control-in-flex/ -->
<mx:Application name="DataGrid_headerStyleName_color_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
.myHeaderStyles {
color: red;
fontWeight: bold;
}
</mx:Style>
<mx:Array id="arrDP">
<mx:Object c="1" c1="One" c2="Two" c3="Three" />
<mx:Object c="2" c1="One" c2="Two" c3="Three" />
<mx:Object c="3" c1="One" c2="Two" c3="Three" />
<mx:Object c="4" c1="One" c2="Two" c3="Three" />
<mx:Object c="5" c1="One" c2="Two" c3="Three" />
<mx:Object c="6" c1="One" c2="Two" c3="Three" />
<mx:Object c="7" c1="One" c2="Two" c3="Three" />
<mx:Object c="8" c1="One" c2="Two" c3="Three" />
<mx:Object c="9" c1="One" c2="Two" c3="Three" />
<mx:Object c="10" c1="One" c2="Two" c3="Three" />
<mx:Object c="11" c1="One" c2="Two" c3="Three" />
</mx:Array>
<mx:DataGrid id="dataGrid"
dataProvider="{arrDP}"
headerStyleName="myHeaderStyles" />
</mx:Application>
You can also set the headerStyleName style in an external .CSS file or <Style> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/23/setting-the-column-header-text-color-on-a-datagrid-control-in-flex/ -->
<mx:Application name="DataGrid_headerStyleName_color_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
DataGrid {
headerStyleName: myHeaderStyles;
}
.myHeaderStyles {
color: red;
fontWeight: bold;
}
</mx:Style>
<mx:Array id="arrDP">
<mx:Object c="1" c1="One" c2="Two" c3="Three" />
<mx:Object c="2" c1="One" c2="Two" c3="Three" />
<mx:Object c="3" c1="One" c2="Two" c3="Three" />
<mx:Object c="4" c1="One" c2="Two" c3="Three" />
<mx:Object c="5" c1="One" c2="Two" c3="Three" />
<mx:Object c="6" c1="One" c2="Two" c3="Three" />
<mx:Object c="7" c1="One" c2="Two" c3="Three" />
<mx:Object c="8" c1="One" c2="Two" c3="Three" />
<mx:Object c="9" c1="One" c2="Two" c3="Three" />
<mx:Object c="10" c1="One" c2="Two" c3="Three" />
<mx:Object c="11" c1="One" c2="Two" c3="Three" />
</mx:Array>
<mx:DataGrid id="dataGrid"
dataProvider="{arrDP}" />
</mx:Application>
Or, you can set the headerStyleName style using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/23/setting-the-column-header-text-color-on-a-datagrid-control-in-flex/ -->
<mx:Application name="DataGrid_headerStyleName_color_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
.myHeaderStyles {
color: red;
fontWeight: bold;
}
</mx:Style>
<mx:Script>
<![CDATA[
private function btn_click(evt:MouseEvent):void {
dataGrid.setStyle("headerStyleName", "myHeaderStyles");
}
]]>
</mx:Script>
<mx:Array id="arrDP">
<mx:Object c="1" c1="One" c2="Two" c3="Three" />
<mx:Object c="2" c1="One" c2="Two" c3="Three" />
<mx:Object c="3" c1="One" c2="Two" c3="Three" />
<mx:Object c="4" c1="One" c2="Two" c3="Three" />
<mx:Object c="5" c1="One" c2="Two" c3="Three" />
<mx:Object c="6" c1="One" c2="Two" c3="Three" />
<mx:Object c="7" c1="One" c2="Two" c3="Three" />
<mx:Object c="8" c1="One" c2="Two" c3="Three" />
<mx:Object c="9" c1="One" c2="Two" c3="Three" />
<mx:Object c="10" c1="One" c2="Two" c3="Three" />
<mx:Object c="11" c1="One" c2="Two" c3="Three" />
</mx:Array>
<mx:Button id="btn"
label="Set headerStyleName"
click="btn_click(event);" />
<mx:DataGrid id="dataGrid"
dataProvider="{arrDP}" />
</mx:Application>
Due to popular demand, here is the “same” example in a more ActionScript friendly format:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/23/setting-the-column-header-text-color-on-a-datagrid-control-in-flex/ -->
<mx:Application name="DataGrid_headerStyleName_color_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
preinitialize="init();">
<mx:Script>
<![CDATA[
import mx.controls.DataGrid;
private var arrDP:Array;
private var dataGrid:DataGrid;
private var dgHeaderStyles:CSSStyleDeclaration;
private function init():void {
arrDP = [];
arrDP.push({c:1, c1:"One", c2:"Two", c3:"Three"});
arrDP.push({c:2, c1:"One", c2:"Two", c3:"Three"});
arrDP.push({c:3, c1:"One", c2:"Two", c3:"Three"});
arrDP.push({c:4, c1:"One", c2:"Two", c3:"Three"});
arrDP.push({c:5, c1:"One", c2:"Two", c3:"Three"});
arrDP.push({c:6, c1:"One", c2:"Two", c3:"Three"});
arrDP.push({c:7, c1:"One", c2:"Two", c3:"Three"});
arrDP.push({c:8, c1:"One", c2:"Two", c3:"Three"});
arrDP.push({c:9, c1:"One", c2:"Two", c3:"Three"});
arrDP.push({c:10, c1:"One", c2:"Two", c3:"Three"});
arrDP.push({c:11, c1:"One", c2:"Two", c3:"Three"});
dgHeaderStyles = new CSSStyleDeclaration(".myHeaderStyles");
dgHeaderStyles.setStyle("color", "red");
dgHeaderStyles.setStyle("fontWeight", "bold");
dataGrid = new DataGrid();
dataGrid.dataProvider = arrDP;
dataGrid.setStyle("headerStyleName", "myHeaderStyles");
addChild(dataGrid);
}
]]>
</mx:Script>
</mx:Application>
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Does anyone know how to use styles to set the rollover color of the header text in a datagrid? I have white text on a dark background in the header of my datagrid and can get the background color to change on the rollover but not the header text color.
Can we freeze first columns in datagrid and set scrollable for remaining columns
- Senthil
senthil,
Yes, http://blog.flexexamples.com/2007/08/15/locking-columns-in-a-horizontally-scrolling-datagrid-control/.
Peter
Do you know if it’s possible to use multiple font colors in the headerText for a single column?
For example, something like “Good/Bad” with Good in green and Bad in red. Any suggestions?
Brian, you will need to set headerRenderer property of the column to a class which you can design as needed.