<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[

        private function loadData():void
        {
            var visible:Boolean;
            dg.dataProvider = employees;
            // loop through all of the columns to bypass visibility rendering issue.
            for( var i:int = 0; i < dg.columns.length; i++ ){
                visible = dg.columns[i].visible;    // track the visible status of this column
                dg.columns[i].visible = true;        // set it to visible
                dg.columns[i].visible = visible;    // reset it to the correct status
            }
        }
        
        private function loadDataWithoutFix():void
        {
            dg.dataProvider = employees;
        }
        
        ]]>

    </mx:Script>

    <mx:XMLList id="employees">
    
    <employee>
        <name>Christina Coenraets</name>
        <phone>555-219-2270</phone>
        <email>ccoenraets@fictitious.com</email>
        <active>true</active>
    </employee>
    
    <employee>
        <name>Joanne Wall</name>
        <phone>555-219-2012</phone>
        <email>jwall@fictitious.com</email>
        <active>true</active>
    </employee>
    
    <employee>
        <name>Maurice Smith</name>
        <phone>555-219-2012</phone>
        <email>maurice@fictitious.com</email>
        <active>false</active>
    </employee>
    
    <employee>
        <name>Mary Jones</name>
        <phone>555-219-2000</phone>
        <email>mjones@fictitious.com</email>
        <active>true</active>
    </employee>
    
    </mx:XMLList>

    <mx:Panel title="DataGrid Control Example" height="100%" width="100%" 
        paddingTop="10" paddingLeft="10" paddingRight="10">
    
        <mx:Label width="100%" color="blue"
            text="Notice how the 'Name' column is hidden but appears when the loading is simply loaded dynamically without the fix."/>
        
        <mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" >
            <mx:columns>
                <mx:DataGridColumn visible="false" dataField="name" headerText="Name"/>
                <mx:DataGridColumn dataField="phone" headerText="Phone"/>
                <mx:DataGridColumn dataField="email" headerText="Email"/>
            </mx:columns>
        </mx:DataGrid>
        
        <mx:Form width="100%" height="100%">
            <mx:Button x="117" y="376" click="loadDataWithoutFix();" label="Loda Data (without fix)"/>
            <mx:Button x="117" y="376" click="loadData();" label="Loda Data"/>
        </mx:Form>
    
    </mx:Panel>

</mx:Application>