Is swapping the columns and rows of a flex datagrid possible?

Question

I have a 1 row, many column flex datagrid. I would like to turn the dataGrid on its side, so that the column headers become a single column running down and v.v.

Is there a way to do that in the DataGrid?

Or am I stuck manipulating the data presented to the grid? If so whats your recommendation?

The main idea here is I have an object like:

x=y
b=u
o=p
u=e
w=p

And I'd like a control that is visually similar to that. Currently the datagrid displays the object as:

x b o u w
y u p e p

Which is too horizontal for my case. Thx

Answer 1

I presume that you want to convert your columns in to a single column this can be done by getting all the columns and put the in array as provide it as a dataprovider.

DataGrid.columns

will return the columns.

and you can do some think like this to create columns.

public function createColumns():Array{
      var advancedDataGridColumn:AdvancedDataGridColumn;
       var i:int;
       var columnsArray:Array = new Array();
        for(i=0;i<columns.length;i++){      
           advancedDataGridColumn=new AdvancedDataGridColumn();  
           advancedDataGridColumn.headerText=columns[i].dispheader.toString();
           advancedDataGridColumn.dataField="@"+columns[i].name.toString();        
           advancedDataGridColumn.itemRenderer=new ClassFactory(Styler);        
           if(columns[i].descending!=undefined ){
            if(columns[i].descending.toString()=="true")
             sortField = new SortField("@"+columns[i].name.toString(),false,true,null);
            else
             sortField = new SortField("@"+columns[i].name.toString(),false,false,null);
           }

           if(advancedDataGridColumn.headerText == Constants.price||
           advancedDataGridColumn.headerText == Constants.quantity||
           advancedDataGridColumn.headerText == Constants.askPrice||
           advancedDataGridColumn.headerText == Constants.bidPrice||
           advancedDataGridColumn.headerText == Constants.netAmount||
           advancedDataGridColumn.headerText == Constants.interestAmount||
           advancedDataGridColumn.headerText == Constants.principalAmount||
           advancedDataGridColumn.headerText == Constants.accruedInterestAmount){
            var currencyFormattor:CurrencyFormatter = new CurrencyFormatter();
            currencyFormattor.useThousandsSeparator=true;
            currencyFormattor.currencySymbol="";
            currencyFormattor.thousandsSeparatorFrom=",";
            currencyFormattor.thousandsSeparatorTo=",";
            advancedDataGridColumn.formatter=currencyFormattor; 
           }       

           columnsArray.push(advancedDataGridColumn);
         }
      return columnsArray;
     }

sorry i just copied the code but i think it will help you.

Answer 2

Set the DataGrid to have only 2 columns and transform the original dataset to an array collection of {propName, propValue}.

Say you have:

var originalDataSet : ArrayCollection;
var dataSet : ArrayCollection;
var columnSet : ArrayCollection;

Once you have the original values, you'll do something like:

dataSet = new ArrayCollection();

for (var i : int; i < originalDataSet.length; i++)
{
    dataSet.addItem({name : columnSet.getItemAt(i), value : originalDataSet.getItemAt(i)});
}

myDataGrid.dataProvider = dataSet;//set the data provider of the grid to the transformed data set.

To clarify:

{name : columnSet.getItemAt(i), value : originalDataSet.getItemAt(i)}

This creates a new instance of type Object and assigns the name and value dynamic properties to their respective values. Instead of this you might want to define your own class with bindable properties. Note that the property names are just for this example because I don't know what you're working with actually.

The data grid at that point should have two columns defined by you, with their dataField properties set accordingly. Also, this example assumes columnSet collection contains the "horizontal columns" that you want displayed vertically. If you can obtain these based on the values in the originalDataset, you might not even need columnSet.