• Flex DataGrid Usage Example

    June 16th, 2010

    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>
    

Leave a Comment

Your email address will not be published. Required fields are marked *