Flex 3: DataGrid Column width on resize

Question

Hello experts,
I am facing an issue with width of DataGrid columns. We are using Flex 3.2.
I am setting the widths for columns in creationComplete handler of DataGrid. When the browser window is resized, say restore down and then maximize,
the column widths are changing. Please find the code below:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="100%" width="100%">
<mx:Script>
    <![CDATA[
        import mx.core.ScrollPolicy;
        [Bindable]
        private var isVisible:Boolean = true;
        private function creationCompleteHandler():void{
            dataGrid.horizontalScrollPolicy = ScrollPolicy.ON;
            artist.width = dataGrid.width * 0.40;
            album.width = dataGrid.width * 0.50;
            Price.width = dataGrid.width * 0.10;
            dataGrid.horizontalScrollPolicy = ScrollPolicy.OFF;
    ]]>
</mx:Script>
<mx:DataGrid id="dataGrid" width="80%" height="100%" creationComplete="creationCompleteHandler()">
      <mx:ArrayCollection>
         <mx:Object Artist="Pavement" Price="11.99"
            Album="Slanted and Enchanted" />
         <mx:Object Artist="Pavement"
            Album="Brighten the Corners" Price="11.99" />
      </mx:ArrayCollection>
      <mx:columns>
          <mx:DataGridColumn id="artist" dataField="Artist"/>
         <mx:DataGridColumn id="album" dataField="Album" visible="{isVisible}"/>
         <mx:DataGridColumn id="Price" dataField="Price" />
      </mx:columns>
   </mx:DataGrid>
</mx:Application>
Is there anything wrong i am doing here? Please help me in resolving this.
Thanks,
Srilatha

Answer 1

Hi Srilatha,
DataGrid width is 100% and the main application width also 100%, So the
DataGrid will try to occupy the whole window, when you do "restore down" &
"maximize" Application width will change.. and it will effect DataGrid and
its columns also. Try to give some fixed width for dataGrid and you can
expect the result.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
height="100%" width="100%">
    <mx:Script>
        <![CDATA[
            import mx.core.ScrollPolicy;
            private var isVisible:Boolean = true;
            private function creationCompleteHandler():void
                dataGrid.horizontalScrollPolicy = ScrollPolicy.ON;
                artist.width = dataGrid.width * 0.40;
                album.width = dataGrid.width * 0.50;
                Price.width = dataGrid.width * 0.10;
                dataGrid.horizontalScrollPolicy = ScrollPolicy.OFF;
        ]]>
    </mx:Script>
    <mx:DataGrid id="dataGrid" width="500" height="100%"
creationComplete="creationCompleteHandler()">
        <mx:ArrayCollection>
            <mx:Object Artist="Pavement" Price="11.99"
                       Album="Slanted and Enchanted" />
            <mx:Object Artist="Pavement"
                       Album="Brighten the Corners" Price="11.99" />
        </mx:ArrayCollection>
        <mx:columns>
            <mx:DataGridColumn id="artist" dataField="Artist"/>
            <mx:DataGridColumn id="album" dataField="Album"
visible=""/>
            <mx:DataGridColumn id="Price" dataField="Price" />
        </mx:columns>
    </mx:DataGrid>
</mx:Application>
Thanks
Pradeep Reddy