AdvancedDataGrid add Column by Dataprovider

Question

I have a problem with the AdvancedDataGrid in Flex. I have a AdvancedDataGrid with a Bindable ArrayCollection as DataProvider. When I set the ArrayCollection (by Clicking on Button 1) the AdvancedDataGrid will represent 4 Columns.

After that i click on Button 2. In this case the AdvancedDataGrid still shows 4 columns instead of the expected 3 columns.

Scenario 2

First clicked Button2 -> AdvancedDataGrid shows 3 columns Clicking Button1 -> AdvancedDataGrid still shows 3 columns instead of the expected 4 columns

How can I tell the AdvancedDataGrid to adjust the Column count?

Snippet:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            [Bindable]
            private var dataProv:ArrayCollection;


            protected function button1_clickHandler(event:MouseEvent):void {
                dataProv = new ArrayCollection([
                    {country:"USA", year2004:3.5, year2005:4.2, year2006:3.7},
                    {country:"UK", year2004:1.7, year2005:3.1, year2006:3.6},
                    {country:"Canada", year2004:2.8, year2005:2.9, year2006:3.4},
                    {country:"Japan", year2004:2.6, year2005:2.3, year2006:2.8},
                    {country:"France", year2004:1.4, year2005:2.1, year2006:2.6},
                    {country:"Brazil", year2004:2.6, year2005:4.9, year2006:4.4},
                    {country:"Russia", year2004:6.4, year2005:7.2, year2006:6.7},
                    {country:"India", year2004:8.0, year2005:7.1, year2006:6.6},
                    {country:"China", year2004:9.9, year2005:10.1, year2006:10.6}
                ]); 
                adg.validateNow();
                adg.dataProvider.refresh();
            }


            protected function button2_clickHandler(event:MouseEvent):void{
                dataProv = new ArrayCollection([
                    {country:"USA", year2004:3.5, year2005:4.2},
                    {country:"UK", year2004:1.7, year2005:3.1},
                    {country:"Canada", year2004:2.8, year2005:2.9},
                    {country:"Japan", year2004:2.6, year2005:2.3},
                    {country:"France", year2004:1.4, year2005:2.1},
                    {country:"Brazil", year2004:2.6, year2005:4.9},
                    {country:"Russia", year2004:6.4, year2005:7.2},
                    {country:"India", year2004:8.0, year2005:7.1},
                    {country:"China", year2004:9.9, year2005:10.1}
                ]); 
                adg.validateNow();
                adg.dataProvider.refresh();
            }

        ]]>
    </mx:Script>

    <mx:HBox width="100%" height="100%">
        <mx:AdvancedDataGrid
            id="adg"
            width="100%"
            height="100%"
            dataProvider="{dataProv}"/>
        <mx:Button label="change" click="button1_clickHandler(event)"/>
        <mx:Button label="changeBack" click="button2_clickHandler(event)"/>
    </mx:HBox>

</mx:Application>

Answer 1

You need to extend the AdvancedDataGrid class and override the collectionChangeHandler. You need to set the protected var generatedColumns to true in order for the dynamic column code to execute more than once.

override protected function collectionChangeHandler(event:Event):void
{
    generatedColumns = true;
    super.collectionChangeHandler(event);
}