How to add Column to Adobe flex mx:DataGrid in mxml and/or actionsctpt?

Question

I have simple mxml code

<mx:DataGrid id="DGG"
             editable="true">
    <mx:dataProvider>
        <mx:Object scheduledDate="4/1/2006"/>
    </mx:dataProvider>
</mx:DataGrid>
<mx:Button id="SetBut"
           label="Set Array as Data Provider"
           click="SetDP(); AddBut.visible = true;"
           x="100.5"
           y="164"
           width="211"/>
<mx:Button id="AddBut"
           label="Add a column!"
           click="AddCol();"
           x="100.5"
           y="194"
           width="211"
           visible="false"/>
<mx:Script>
    <![CDATA[
        import mx.controls.dataGridClasses.DataGridColumn;
        import mx.collections.ArrayCollection;

        [Bindable]
        public var MyAC:ArrayCollection=new ArrayCollection([{scheduledDate: "4/1/2006", homeTeam: "Chester Bucks"}]);

        public function SetDP():void
        {
            DGG.dataProvider=MyAC
        }

        public function AddCol():void
        {
            MyAC.addItem({scheduledDate: "4/5/2007", homeTeam: "Long Valley Hitters", Umpire: "Amanda Hugenkis"});
            DGG.columns.push(new DataGridColumn("Umpire"));
        }
    ]]>
</mx:Script>

I want to add rows to my table datagrid how to do such thing?

How to add Column to Adobe flex mx:DataGrid in mxml and/or actionsctpt?

(You can put this code in Flash or AIR app - it will compile with no errors, but will not add any columns=( )

Answer 1

The best way to add rows is to use a bindable dataProvider, and I prefer the ArrayCollection Class.

[Bindable] public var MyAC:ArrayCollection = new ArrayCollection([
  {scheduledDate:"4/1/2006", homeTeam:"Chester Bucks",awayTeam:"Long Valley Hitters", field:"Dawn Field", umpire:"Phil McKraken"}
]);

Then in your datagrid, instead of defining your DP through MXML add it like this:

<mx:DataGrid id="dataGrid" editable="true" dataprovider="{MyAC}"....>

Then you can add rows by adding items into your MyAC var via action script:

MyAC.AddItem({scheduledDate:"4/5/2006", homeTeam:"Long Valley Hitters",awayTeam:"Chester Bucks", field:"Sunset Field", Umpire:"Amanda Hugenkis"})

Since it's bound it will automatically show up in the dataGrid.

Assume you define your columns in MXML as in your example you can add the Umpire column like so:

dataGrid.columns.push(new DataGridColumn("Umpire"));

Credit to ClownBaby for the column adding AS that was already posted.

EDIT 2/1/2010: Full Code Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        [Bindable] public var MyAC:ArrayCollection = new ArrayCollection([
          {scheduledDate:"4/1/2006", homeTeam:"Chester Bucks",awayTeam:"Long Valley Hitters", field:"Dawn Field", umpire:"Phil McKraken"}
        ]);

        public function addRow():void{
            MyAC.addItem({scheduledDate:"4/5/2006", homeTeam:"Long Valley Hitters",awayTeam:"Chester Bucks", field:"Sunset Field", Umpire:"Amanda Hugenkis"})
        }

        public function addCol():void{
            var dgc:DataGridColumn = new DataGridColumn("Umpire");
                var cols:Array = dataGrid.columns;
                cols.push(dgc);
                dataGrid.columns = cols;
        }
    ]]>
</mx:Script>

<mx:DataGrid id="dataGrid" editable="true" dataProvider="{MyAC}">
    <mx:columns>
        <mx:DataGridColumn dataField="scheduledDate" />
        <mx:DataGridColumn dataField="homeTeam" />
        <mx:DataGridColumn dataField="awayTeam" />
        <mx:DataGridColumn dataField="field" />
    </mx:columns>
</mx:DataGrid>
    <mx:Button x="10" y="150" label="Add Row" click="addRow();"/>
    <mx:Button x="202" y="150" label="Add Col" click="addCol();"/>

</mx:Application>