DataGrid Item Renderers… Think outside the <mx:Box/>

Ok… so I think I’m funny. This is more about thinking OF the <mx:Box/>

Let’s say you want to create a custom ItemRenderer for a Datagrid that has layout control like the HBox container. You cannot simply write a custom component and assign that to a DataGridColumn. You’ll find out that in order to get access to data being assigned to your formatted column at runtime, you need to implement IDropInListItemRenderer. The only components useful to DataGrid that already implement that interface are: Button, ComboBox, DataGridItemRenderer, DateField, Image, Label, ListBase, ListItemRenderer, NumericStepper, TextArea, and TextInput.

This is fairly easy to overcome. All you have to do to a container like HBox would be to define that interface to implement, create a getter and setter for the listData property, and handle the dataChange event so when this class is reused as a renderer in a list, we appropriately set the property that stores our DataGrisListData:

<mx:HBox
    implements="mx.controls.listClasses.IDropInListItemRenderer"
    dataChange="onDataChange">

private var _listData : BaseListData;
private var _dgListData : DataGridListData;

public function get listData() : BaseListData{
return _listData;
}

public function set listData(value : BaseListData) : void{
this._listData = value;
}

public function onDataChanged(event : Event) : void{
_dgListData = listData as DataGridListData;
}

When the item renderer is used at runtime and the data property is set to the item in the grid, you can access the appropriate datafield which you intend to format. In this case I’m setting a private [Bindable] variable that a label is listening to:

public override function set data(value : Object) : void{
    super.data = value;
    _theLabelText = value[_dgListData.dataField] as String;
    super.invalidateDisplayList();
}

Now you can use the HBox to do this:

<mx:DataGridColumn
    datafield="myfield"
    itemrenderer="myHBoxRenderer"/>

I’ve used this method to create an Excel-style Accounting Renderer. It will be posted shortly here in this blog.