Flex DataGrid Usage Example

The main problem was to make strings in the Flex DataGrid re-sizable according to content size without appearance of a scrolling…
This example can be easily rewritten for any Flex component containing strings such as List for instance

The main MXML

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Script>
 <![CDATA[
 import mx.controls.TextInput;
 import mx.events.ItemClickEvent;
 import mx.events.DataGridEvent;
 import mx.collections.ArrayCollection;
 private var delay:uint = 100;
 private var repeat:uint = 1;
 private var myTimer:Timer = new Timer(delay, repeat);
 [Bindable]
 private var initDG:ArrayCollection = new ArrayCollection([
 {Artist:'Pavement', Album:'Slanted and Enchanted',
 Price:11.99, Cover: 'http://groups.google.com/group/flex_india/icon?v=2&hl=ru'},
 {Artist:'The section Default item rendering and cell editing shows a DataGrid control that displays information about albums by using three text fields. You could add a visual element to your DataGrid control to make it more compelling. To do that, you modify the data provider so that it contains a URL for a JPEG image of the album cover. :', Album:'Slanted and Enchanted',
 Price:11.99, Cover: 'http://groups.google.com/group/flex_india/icon?v=2&hl=ru'},
 {Artist:'t item rendering and cell editing shows a DataGrid control that displays information about albu', Album:'Slanted and Enchanted',
 Price:11.99, Cover: 'http://groups.google.com/group/flex_india/icon?v=2&hl=ru'},
 {Artist:'The section Default item rendering and cell editing shows a DataGrid control that displays information about albums by using three text fields. You could Default item rendering and cell editing shows a DataGrid control that displays information about albums by using three text fields. You could add a visual element to your DataGrid control to make it more compelling. To do that, you modify the data provider so that it contains a URL for a JPEG image of the album cover.The section Default item rendering and cell editing shows a DataGrid control that displays information about albums by using three text fields. You could add a visual element to your DataGrid control to make it more compelling. To do that, you modify the data provider so that it contains a URL for a JPEG image of the album cover.', Album:'Slanted and Enchanted',
 Price:11.99, Cover: 'http://groups.google.com/group/flex_india/icon?v=2&hl=ru'},
 {Artist:'on Default item rendering and cell editing shows a DataGrid control that displays information about alb', Album:'Slanted and Enchanted',
 Price:11.99, Cover: 'http://groups.google.com/group/flex_india/icon?v=2&hl=ru'},
 {Artist:'on Default item rendering and cell editing shows a DataGrid control that displays information about alb', Album:'Slanted and Enchanted',
 Price:11.99, Cover: 'http://groups.google.com/group/flex_india/icon?v=2&hl=ru'},
 {Artist:'Pavement', Album:'Brighten the Corners', Price:11.99, Cover: 'http://groups.google.com/group/flex_india/icon?v=2&hl=ru'}
 ]);
 private function dataGridHeaderShift(e:DataGridEvent):void{
 if(myTimer!=null)myTimer.stop();
 myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, function (e:TimerEvent):void{
 myTimer.stop();
 initDG.refresh();
 });
 myTimer.start();
 }
 ]]>
 </mx:Script>
 <mx:DataGrid&nbsp;&nbsp; columnStretch="dataGridHeaderShift(event);" liveScrolling="true"&nbsp;&nbsp; horizontalScrollPolicy="on" wordWrap="true" id="myGrid"
 dataProvider="{initDG}"
 variableRowHeight="true" height="700">
 <mx:columns>
 <mx:DataGridColumn dataField="Artist" itemRenderer="DynamicTextArea" />
 <mx:DataGridColumn dataField="Album" itemRenderer=" mx.controls.TextInput" />
 <mx:DataGridColumn dataField="Cover"&nbsp; itemRenderer="TestRenderer"/>
 <mx:DataGridColumn dataField="Price"/>
 </mx:columns>
 </mx:DataGrid>
</mx:Application>

itemRenderer DynamicTextArea

package {
 import mx.controls.TextArea;
 import flash.events.Event;
 import mx.containers.Canvas;
 import mx.controls.TextArea;
 import mx.styles.*;
 public class DynamicTextArea extends TextArea{
 public function DynamicTextArea(){
 super();
 super.horizontalScrollPolicy = "off";
 super.verticalScrollPolicy = "off";
 super.height = 15;
 this.addEventListener(Event.CHANGE, adjustHeightHandler);
 }
 private function adjustHeightHandler(event:Event = null):void{
 if(height <= textField.textHeight + (textField.getLineMetrics(0).height)/2){
 height = textField.measuredHeight+3;
 super.height = textField.measuredHeight+3;
 super.validateNow();
 }else{
 height = textField.measuredHeight+3;
 super.height = textField.measuredHeight+3;
 super.validateNow();
 }
 }
 override public function set text(val:String):void{
 textField.text = val;
 adjustHeightHandler(null);
 super.validateNow();
 }
 override public function set htmlText(val:String):void{
 textField.htmlText = val;
 adjustHeightHandler(null);
 super.validateNow();
 }
 override public function set height(value:Number):void{
 if(textField == null){
 if(height <= value){
 super.height = value;
 }
 }else{
 var currentHeight:uint = textField.measuredHeight+3 + textField.getLineMetrics(0).height;
 if (currentHeight<= super.maxHeight){
 if(textField.measuredHeight+3 != textField.getLineMetrics(0).height){
 super.height = currentHeight;
 }
 }else{
 super.height = super.maxHeight;
 }
 }
 }
 override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
 super.height = (textField.measuredHeight+3)
 height = (textField.measuredHeight+3)
 super.updateDisplayList(unscaledWidth, unscaledHeight);
 }
 override public function get text():String{return textField.text;}
 override public function get htmlText():String{return textField.htmlText; }
 override public function set maxHeight(value:Number):void{ super.maxHeight = value; }
 override public function get maxWidth():Number{&nbsp; return textField.maxWidth;}
 override public function set maxWidth(value:Number):void{super.maxWidth = value;}
 override public function set maxChars(value:int):void{&nbsp; super.maxChars = value;}
 override public function get maxChars():int{ return textField.maxChars;}
 public function setMyStyle(styleProp:String, newValue:Object):void{super.setStyle(styleProp, newValue);}
 }
}

itemRenderer containing image

</pre>
</span>

<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" >
 <mx:Image id="albumImage"&nbsp; source="{data.Cover}"/>
</mx:HBox>

<span>
<pre>