How to transpose data in Flex dataGrid - datagrid

Question

I have an arrayCollection with 3 columns as such:
Col1 Col2 Col3
a 1 X
b 2 Y
c 3 Z
d 4 W
I want to tranpose this set of data and display it in Flex DataGrid.
I have got till here with my function below, the grid is showing (a,b,c,d etc) as columns but the rows are not filled. For example the first column should show "a" as header and "1" in the 1st row and "X" in the 2nd row.
Can someone help me with this.
This is my function.
public function createColumns(myArrayColl:ArrayCollection):void{
var advancedDataGridColumn:AdvancedDataGridColumn;
var i:int;
var columnsArray:Array = new Array();
for(i=0;i< myArrayColl.length;i++){
advancedDataGridColumn=new AdvancedDataGridColumn();
advancedDataGridColumn.headerText= getFormattedPeriod(myArrayColl[i].Col1.toString());
advancedDataGridColumn.dataField=myArrayColl[i].Col2.toString();
advancedDataGridColumn.dataField=myArrayColl[i].Col2.toString();
advancedDataGridColumn.dataField=myArrayColl[i].Col3.toString();
columnsArray.push(advancedDataGridColumn);
}
adg1.columns = columnsArray;
adg1.invalidateDisplayList();
}

Answer 1

I had the same problem and solved using Spark DataGroup with a Horizontal Layout:
<?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">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable] private var array : ArrayCollection = new ArrayCollection([
{Col1:"a",Col2:"1",Col3:"X"},
{Col1:"b",Col2:"2",Col3:"Y"},
{Col1:"c",Col2:"3",Col3:"Z"},
{Col1:"d",Col2:"4",Col3:"W"},
]);
]]>
</fx:Script>
<s:HGroup x="225" y="49">
<!--the VGroup below it's a kind of a 'vertical header'. If you, like use it.-->
<s:VGroup width="50" id="vHeader">
<s:Label text="Col 1" fontWeight="bold"/>
<s:Label text="Col 2"/>
<s:Label text="Col 3"/>
</s:VGroup>
<!--the DataGroup with Horizontal layout and a itemRenderer using a VGroup-->
<s:DataGroup id="dataGroup" clipAndEnableScrolling="true"
dataProvider="{array}" width="100">
<s:layout>
<s:HorizontalLayout gap="1" useVirtualLayout="true"/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer width="49">
<fx:Script>
<![CDATA[
]]>
</fx:Script>
<s:VGroup>
<s:Label text="{data.Col1}" fontWeight="bold"/>
<s:Label text="{data.Col2}"/>
<s:Label text="{data.Col3}"/>
</s:VGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:DataGroup>
</s:HGroup>
<!--the HSCrollBar positioned above the dataGroup-->
<s:HScrollBar x="276" y="27" width="100" pageSize="50" stepSize="50"
viewport="{dataGroup}"/>
</s:Application>