[flexcoders] Grid | colspan | how to change dynamically

[ilikeflex]

hi

See the code below. On button click i want to change the grid's row 2.
But the colspan does not change. I have tried all kind of invalidate... methods.

How can this be done.Any pointers...

Thanks
ilikeflex

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";>

    <mx:Grid id="myGrid">

        <!-- Define Row 1. -->
        <mx:GridRow id="row1">
            <!-- Define the first cell of Row 1. -->
            <mx:GridItem>
                <mx:Button label="Button 1"/>
            </mx:GridItem>
            <!-- Define the second cell of Row 1. -->
            <mx:GridItem>
                <mx:Button label="2"/>
            </mx:GridItem>
            <!-- Define the third cell of Row 1. -->
            <mx:GridItem>
                <mx:Button label="Button 3"/>
            </mx:GridItem>
        </mx:GridRow>

        <!-- Define Row 2. -->
        <mx:GridRow id="row2">
            <!-- Define a single cell to span three columns of Row 2. -->
            <mx:GridItem colSpan="3" horizontalAlign="center" id="dridItemtest">
                <mx:Button label="Long-Named Button 4"/>
            </mx:GridItem>
        </mx:GridRow>

        <!-- Define Row 3. -->
        <mx:GridRow id="row3">
            <!-- Define an empty first cell of Row 3. -->
            <mx:GridItem/>
            <!-- Define a cell to span columns 2 and 3 of Row 3. -->
            <mx:GridItem colSpan="2" horizontalAlign="center">
                <mx:Button label="Button 5"/>
            </mx:GridItem>
        </mx:GridRow>

    </mx:Grid>
    
    <mx:Button label="Test" click="onClick()"/>
    
    <mx:Script>
        <![CDATA[
                public function onClick(){
                        dridItemtest.colSpan = 1;
                        dridItemtest.validateDisplayList();
                        dridItemtest.validateProperties();
                        //myGrid.validateDisplayList();
                        //myGrid.validateProperties();
                }
        ]]>
    </mx:Script>
</mx:Application>