3 Replies Latest reply on May 22, 2009 5:31 AM by Gregory Lafrance

    DataGrid fitting to content

    Mohd Fayaz Level 1

      How to set DataGrid column width fit to its content dynamically.

        • 1. Re: DataGrid fitting to content
          Gregory Lafrance Level 6

          Its not possible to do this, at least not easily. You could try to access the width of the content using itemRenderers that set the column width, but its best to consider the data, and then use an itemRenderer that minimizes the need for setting the column widths dynamically.

          1 person found this helpful
          • 2. Re: DataGrid fitting to content
            Mohd Fayaz Level 1

            Thanks for reply,

             

            I have to set width dynamically only, as I dont know in advance what will be the data in DataGrid. Also, the data is dynamic, it could change from one point in time to other.

             

            could you please explain how can i access width of content using itemrenderer, if possible, with some example code?

            • 3. Re: DataGrid fitting to content
              Gregory Lafrance Level 6

              Here is a basic example. Notice the use of outerDocument and how I removed width="100%" from the Text control. Also notice my use of measuredWidth instead or width.

               

              As I said, this can get complex and might not always work, but in theory, it can be done.

               

              If this post answers your question of helps, please mark it as such.

               

               

               

              <?xml version="1.0"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
                <mx:Script>
                  <![CDATA[
                    import mx.collections.ArrayCollection;
              
                    public var localVar:String="Application localVar";
              
                    [Bindable] private var initDG:ArrayCollection = new ArrayCollection([
                      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
                      {Artist:'Pavement', Album:'Brighten the Corners', Price:11.99}
                    ]);
                  ]]>
                </mx:Script>
                <mx:DataGrid id="myGrid" dataProvider="{initDG}"
                  variableRowHeight="true">   
                  <mx:columns>
                    <mx:DataGridColumn dataField="Artist"/>
                    <mx:DataGridColumn id="albumCol" dataField="Album">
                      <mx:itemRenderer>
                        <mx:Component>
                          <mx:VBox>
                            <mx:Text id="albumName" 
                              text="{data.Album}"
                              creationComplete="outerDocument.albumCol.width=albumName.measuredWidth"/>
                          </mx:VBox>
                        </mx:Component>
                      </mx:itemRenderer>
                    </mx:DataGridColumn>    
                    <mx:DataGridColumn dataField="Price"/>
                  </mx:columns>       
                </mx:DataGrid>      
              </mx:Application>
              
              1 person found this helpful