5 Replies Latest reply on Apr 13, 2011 10:48 PM by pradeep reddy

    Flex 3: DataGrid Column width on resize

    srilatha reddy Level 1

      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

        • 1. Re: Flex 3: DataGrid Column width on resize
          pradeep reddy Level 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

          • 2. Re: Flex 3: DataGrid Column width on resize
            Flex harUI Adobe Employee

            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.

            1 person found this helpful
            • 3. Re: Flex 3: DataGrid Column width on resize
              srilatha reddy Level 1

              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

              • 4. Re: Flex 3: DataGrid Column width on resize
                Flex harUI Adobe Employee

                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.

                • 5. Re: Flex 3: DataGrid Column width on resize
                  pradeep reddy Level 1

                  Srilatha,

                   

                  Then Don't make the DataGrid Columns depend on DataGrid width.

                   

                                  artist.width = dataGrid.width * 0.40;

                                  album.width = dataGrid.width * 0.50;

                                  Price.width = dataGrid.width * 0.10;

                   

                  Thanks

                  Pradeep