Passing Values to a Custom ItemRenderer

I have been working with a DataGrid and wanted one of the columns to display HTML formatted content. I also wanted to pass a value into the ItemRenderer (in addition to the data object that is automatically passed by the DataGrid into the ItemRenderer).  The columns of the DataGrid are created dynamically in actionscript. The solution I came up with was to subclass a Text control that implements the IFactory and IListItemRenderer interfaces. After parsing the data object, it sets the htmlText property of the Text control to display the rendered HTML. I had to play with it a little bit, but it was actually a pretty quick fix.

One nice thing about using an actionscript class for an ItemRenderer, rather than an mxml component, is that it gives you extra flexibilty (such as the ability to pass values and create custom properties).  But the biggest advantage is in the performance.  You'll notice that large amounts of data can really bog down drawing the DataGrid when using an mxml component.

Here's the code snippet that demonstrates how to assign the ItemRenderer to a DataGridColumn...

var dgCol:DataGridColumn = new DataGridColumn();
var factory:ClassFactory = new ClassFactory(ReportHTMLRenderer)
//here's where you can set a property in the itemrenderer...
factory.properties = {field:"some value"};
dgCol.itemRenderer = factory;


Here's the ItemRenderer class (ReportHTMLRenderer)...

package myComponents
{
    import flash.errors.*;
    import mx.controls.*;
    import mx.controls.listClasses.IListItemRenderer;
    import mx.core.IFactory;

    public class ReportHTMLRenderer extends Text implements IFactory, IListItemRenderer
    {
        private var _data:Object;
        private var _field:String = new String();

        public function ReportHTMLRenderer(){
            super();
            this.percentHeight = 100;
            this.percentWidth = 100;
         }
       
        public function newInstance():*{
            return new ReportHTMLRenderer();
        }
       
        override public function set data(value:Object):void{
            this._data = value;
            this.htmlText = parseData(_data);
        }

        public function set field(str:String):void{
            this._field = str;
        }

        private function parseData(item:Object):String{
            try{
                var xml:XML = XML(item);
                var nodeName:String = _field;
                return decodeURI(xml.child(nodeName).text());
            }catch(e:Error){
                return e.message;
            }
        }
           
    }
}