Rotate the Header Text in Datagrid in Flex3

Hi,
Here is the nice example for rotate the header text of the datagrid. The custom class i created for rotate the header text of Datagrid. When we need to rotate the text we must embed the text otherwise it cannot be visible the header text after rotate it.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
<mx:Style>
@font-face
{
src: url("/assets/fonts/trebucbd.ttf");
fontFamily: "TrebuchetMSBold";
fontWeight: bold;
}
</mx:Style>
<mx:Script>
<![CDATA[
import com.GridHeader;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.rpc.events.HeaderEvent;
import mx.controls.DataGrid;
[Bindable]
private var dp1:Array = [{Product: "ADBE", name: "Adobe Systems Inc.", price: 49.95},
{Product: "MACR", name: "Macromedia Inc.", price: 39.95},
{Product: "MSFT", name: "Microsoft Corp.", price: 25.95},
{Product: "IBM", name: "IBM Corp.", price: 42.55}];
[Bindable]
private var dp2:Array = [{Product: "SOFT", name: "Software", price: 49.95},
{Product: "HARD", name: "Hardware", price: 39.95},
{Product: "NETW", name: "Network", price: 25.95}];
private function onChangeProvider():void
{
if(dg.dataProvider.length == 4)
dg.dataProvider = dp2;
else if(dg.dataProvider.length == 3)
dg.dataProvider = dp1;
}
]]>
</mx:Script>
<mx:VBox>
<mx:DataGrid id="dg" dataProvider="{dp1}">
<mx:columns>
<mx:DataGridColumn headerText="Product" dataField="Product" headerRenderer="com.GridHeader"/>
<mx:DataGridColumn headerText="Name" dataField="name" headerRenderer="com.GridHeader"/>
<mx:DataGridColumn headerText="Price" dataField="price" headerRenderer="com.GridHeader"/>
</mx:columns>
</mx:DataGrid>
<mx:Button label="Change Provider" click="onChangeProvider()"/>
</mx:VBox>
</mx:Application>

The code for the custom class for rotate the text as follows

package com
{
import flash.text.AntiAliasType;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import mx.containers.VBox;
import mx.controls.listClasses.IListItemRenderer;
public class GridHeader extends VBox implements IListItemRenderer
{
private var _lbl:TextField;
public function GridHeader()
{
super();
height = 60;
setStyle("backgroundColor",0xFF0000);
setStyle("verticalGap",2);
}
override protected function createChildren():void
{
super.createChildren();
var _txtFormat:TextFormat = new TextFormat();
_txtFormat.font = "TrebuchetMSBold";
_txtFormat.size = 13;
_txtFormat.bold = true;
_txtFormat.color = 0x0000FF;
_txtFormat.align = "center";
_lbl = new TextField();
_lbl.autoSize = TextFieldAutoSize.LEFT;
_lbl.embedFonts = true;
_lbl.antiAliasType = AntiAliasType.ADVANCED;
_lbl.defaultTextFormat = _txtFormat;
_lbl.rotation = 270;
rawChildren.addChild(_lbl);
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
if(data.headerText != null data.headerText != "")
{
_lbl.text = data.headerText;
_lbl.y = height-5;
_lbl.x = (width - _lbl.width)/2;
}
}
}
}