DataGrid fitting to content

Question

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

Answer 1

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>