Unable to Align data in Datagrid - actionscript-3

Question

Hi I have issue with alignment of data in the spark datagrid column after Rendering. All the headers are aligned towards left, however i would like to do the following
1. Middle the column header name.
2. Align the text to right.
3.Freeze the first column so that when i do horizontal scroll, the first column should not move horizontally.
Any help in this regard would be highly grateful.
Thanks and regards
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
clipAndEnableScrolling="true">
<fx:Script>
<![CDATA[
import flashx.textLayout.formats.BackgroundColor;
import mx.controls.Alert;
import mx.states.SetStyle;
private const POSITIVE_COLOR:uint = 0x000000; // Black
private const NEGATIVE_COLOR:uint = 0xFF0000; // Red
override public function prepare(hasBeenRecycled:Boolean):void {
if (this.data) {
if (column.labelFunction != null ) {
lblData.text = column.labelFunction( data, column );
setStyle("color", (parseInt(this.data.st1) < 0) ? NEGATIVE_COLOR : POSITIVE_COLOR);
} else {
lblData.text = data[column.dataField];
}
}
}
]]>
</fx:Script>
<s:Label id="lblData" top="9" left="7" textAlign="right"/>
</s:GridItemRenderer>

Answer 1

2/ Align the text to right.
I'll start with the easiest one.
In your custom item renderer, you're still aligning to the left (left="7"). You have two options to fix this:
<s:Label id="lblData" top="9" right="7"/>
will align the Label to the right and cause text overflow to the left
<s:Label id="lblData" top="9" left="7" right="7" textAlign="right"/>
will make the Label take all the available space, align the text to the right and truncate the text if it's too big
1/ Middle the column header name.
I think the only way is to create a custom headerRenderer.
copy the entire DefaultGridHeaderRenderer
find the Label with id "labelDisplay"
change its textAlign property to center
assign the custom headerRenderer:
<s:GridColumn headerRenderer="path.to.CenteredHeaderRenderer"/>
3/ Freeze the first column so that when i do horizontal scroll, the first column should not move horizontally.
I'm afraid this is going to require some serious hacking. If you don't want to dive in and create a customized DataGrid, I think your best bet is to fake it:
create a List to represent the fixed column
create a DataGrid to represent the other columns
turn off the List's vertical scrollbar: you wanna controll the scrolling through the grid
bind their vertical scrolling position: when the DataGrid is vertically scrolled, the List must follow and vice-versa
bind their selected items
do some skinning to make it look like one DataGrid