Dynamic datagrid columns in Flex

Question

I have <mx:DataGrid> in my system like the following.

<mx:DataGrid id="testDG">
  <mx:columns>
    <mx:DataGridColumn headerText="name" dataField="name">
    <mx:DataGridColumn headerText="measure" dataField="measure">
  </mx:columns>
</mx:DataGrid>

It has two columns, name and measure. I want to add another number of columns and it's data in the datagrid as respect to measure.

So, it looks like:

name  measure  1-Aug  2-Aug   3-Aug ...

abc   ggggg    20      22      24   ...
xyz   fffff    21      19      20   ...
pqr   hhhhh    30      21      13   ...

...    ...     ...     ...     ...

I want to add date wise result followed by measure column dynamically.
So, is it possible? How can I add dynamic columns after measures in Flex?

Answer 1

How about this?

// Get current columns here.
var cols: Array = grid.columns;

var col1:DataGridColumn = new DataGridColumn();
col1.headerText = "1-Aug";
col1.dataField = "foo";
cols.push(col1);

var col2:DataGridColumn = new DataGridColumn();
col2.headerText = "2-Aug";
col2.dataField = "baz";
cols.push(col2);

grid.columns = cols;

If you want to add from 1-Aug to 31-Aug and these datafield is like val1~val31, how about this?

var cols: Array = grid.columns;
for (var i:int=1; i<=31;i++){
    var col:DataGridColumn = new DataGridColumn();
    col.headerText = i.toString()+"-Aug";
    col.dataField = "val"+i.toString();
    cols.push(col);
}
grid.columns = cols;

If you want to add other months, you should get from calendar instead of static 31 value.

Update: Oct 1 2015 16:40(JST)

For spark.DataGrid, there are different from mx.DataGrid a little.
Here is the code for spark.DataGrid.

// Get current columns here.
var list: ArrayList = grid.columns as ArrayList;
var cols: Array = list.source;

var col: GridColumn = new GridColumn();
col.headerText = "1-Aug";
col.dataField = "foo";
cols.push(col);

// Redefine columns.
grid.columns = new ArrayList(cols);

<s:DataGrid id="grid">
    <s:columns>
        <s:ArrayList>
            <s:GridColumn dataField="type" width="100"/>
            <s:GridColumn dataField="name" width="100"/>
        </s:ArrayList>
    </s:columns>
</s:DataGrid>

Answer 2

DataGrid has property columns. It can be used to set up columns dynamically. See example:

var columns:Array = [];
var nameColumn:DataGridColumn = new DataGridColumn("name");
nameColumn.dataField = "name";
columns.push(nameColumn);
var measureColumn:DataGridColumn = new DataGridColumn("measure");
measureColumn.dataField = "measure";
columns.push(measureColumn);
var newColumn:DataGridColumn = new DataGridColumn("1-Aug");
newColumn.dataField = "1AugValue";
columns.push(newColumn);
...
dataGrid.columns = columns;

As far as I know, when you need to change column structure while keeping columns, that are already present, you need to create new array and declare the already present columns again.