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.