align DataGrid header differently than data

[actionscript_user]

I am new to Flex and am trying to set the alignment on the header of a DataGrid to "center" and right-align the data in some of the columns but cannot get this to work. Any help is greatly appreciated. Here is what I have:

<?xml version="1.0"?>
<!-- DataGrid control example. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
.headerStyle{font-weight:bold;text-align:center;color:blue;}
</mx:Style>
<mx:XMLList id="employees">
<employee>
<name>Christina Coenraets</name>
<phone>555-219-2270</phone>
<email>[email protected]</email>
<salary>$55,000</salary>
<active>true</active>
</employee>
<employee>
<name>Joanne Wall</name>
<phone>555-219-2012</phone>
<email>[email protected]</email>
<salary>$47,000</salary>
<active>true</active>
</employee>
</mx:XMLList>
<mx:Panel title="DataGrid Control Example" height="100%" width="100%"
paddingTop="10" paddingLeft="10" paddingRight="10">

<mx:Label width="100%" color="blue"
text="Select a row in the DataGrid control."/>

<mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" headerStyleName="headerStyle" dataProvider="{employees}">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Name"/>
<mx:DataGridColumn dataField="phone" headerText="Phone"/>
<mx:DataGridColumn dataField="email" headerText="Email"/>
<mx:DataGridColumn dataField="salary" headerText="Salary" textAlign="right"/>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:Application>

[cachanchan]

Just add the text-align property for each column and set the value right. or just add another style DataGrid{text-align: right;} for all the columns

[sherazjamshed]

cachanchan: the solution you suggested does not work. I am not quite sure if there is any solution to it.

[sherazjamshed]

OOps !! no there is a simple solution...

http://blog.flexexamples.com/2007/08/28/styling-the-flex-datagrid-control-using-a-custom-separator-skins/