Skip to main content
Participant
April 14, 2011
Question

Flex 3: DataGrid Column width on resize

  • April 14, 2011
  • 2 replies
  • 11228 views

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

    This topic has been closed for replies.

    2 replies

    Adobe Employee
    April 14, 2011

    That's expected behavior. With ScrollPolicy.OFF, the datagrid will shrink

    down all column until they fit, then when you expand, they may expand

    differently because they lost their proportions during the shrinking. You

    may want to call your columns sizing code when the app resizes.

    Participant
    April 14, 2011

    Thanks for your quick responses.

    @Pradeep:

    I cannot fix the width of DataGrid as i want it to occupy 100% of the Flex application size.

    @Flex harUI:

    I understand what you said. Could you please give me the event which gets dispatched on application resize?

    And if the user has manually dragged the columns, i shouldnt reset the widths of the columns again right. Is there a way to find out if the user has changed the size of the columns?

    Thanks,

    Srilatha

    Adobe Employee
    April 14, 2011

    There should be RESIZE event from the application. I'd probably store the

    column widths somewhere else on maybe UPDATE_COMPLETE and use that

    information during the RESIZE.

    kprmca
    Participating Frequently
    April 14, 2011

    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