# Can't change AdvancedDataGrid Header Color

**URL:** <https://forum.kirupa.com/t/cant-change-advanceddatagrid-header-color/313359>\
**Category:** flash\
**Created:** [August 26, 2010, 9:57pm UTC](https://forum.kirupa.com/t/cant-change-advanceddatagrid-header-color/313359 "2010-08-26T21:57:20Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![budkin](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/budkin/32/1457_2.png) [@budkin](https://forum.kirupa.com/u/budkin)\
**Post date:** [August 26, 2010, 9:57pm UTC](https://forum.kirupa.com/t/cant-change-advanceddatagrid-header-color/313359/1 "2010-08-26T21:57:20Z")

</div>

Hello,

I’m having a really annoying problem styling the AdvancedDataGrid header text colors. With a regular DataGrid you can use a property called “headerStyleName” to set the color of the header text. According to the documentation this style is applicable to AdvancedDataGrid as well. You can see that here:

[http://help.adobe.com/en\_US/FlashPlatform/reference/actionscript/3/mx/controls/AdvancedDataGridBaseEx.html#style:headerStyleName](http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/AdvancedDataGridBaseEx.html#style:headerStyleName)

Here is a sample app that will show you what I’m talking about. Notice that both grids share the same style but only the normal grid will apply it.

```auto
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx">
	
	<s:layout>
		<s:VerticalLayout paddingTop="10"
						  paddingRight="10"
						  paddingBottom="10"
						  paddingLeft="10" />
	</s:layout>
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		.headerStyle
		{
			color: #FF0000;
			fontWeight: bold;
		}
	</fx:Style>
	<mx:DataGrid width="100%" height="100%" headerStyleName="headerStyle">
		<mx:columns>
			<mx:DataGridColumn headerText="Header 1" />
			<mx:DataGridColumn headerText="Header 2" />
		</mx:columns>
	</mx:DataGrid>
	<mx:AdvancedDataGrid width="100%" height="100%" headerStyleName="headerStyle">
		<mx:columns>
			<mx:AdvancedDataGridColumn headerText="Header 1" />
			<mx:AdvancedDataGridColumn headerText="Header 2" />
		</mx:columns>
	</mx:AdvancedDataGrid>
	
</s:Application>

```

This is driving me nuts as I have to use Advanced data grids because of their added functionality. I would greatly appreciate any solutions to this.