Search code examples
actionscript-3apache-flexdatagridactionscript

Dynamic datagrid columns in Flex


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?


Solution

  • 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>