Setting the column header text color on a DataGrid control in Flex
Problem
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.
Solution
Create a custom style selector and set the color style to the desired text color. Next, set the DataGrid's headerStyleName style to the custom style selector.
Detailed explanation
<?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>
For more information, see "Setting the column header text color on a DataGrid control in Flex" at FlexExamples.com.
Report abuse
