REDBLIND

There are a lot of examples out there on ItemRenderers. They are mostly inline ItemRenderers and the examples of external ItemRenderers usually leave out one crucial aspect. How do you abstract your ItemRenderer? For example, you obviously don’t want to create an individual ItemRenderer for every single column of your AdvancedDataGrid. This is not really documented and only a few people have blogged on this topic. I eventually found the solution on the defunct blog of Peter Ent in Google Cache.

The solution (or the way to find your solution) is to implement IDropInListItemRenderer in your ItemRenderer component. This will force you to create a listData() setter and getter. You can then override the data() setter to do your bidding.

Below is an example of an ItemRenderer component that can be reused, since it can access the dataField defined in the AdvancedDataGridColumn. The value is displayed in a TextInput. When the TextInput is changed it also updates the dataProvider.

<mx:box xmlns:mx="http://www.adobe.com/2006/mxml" implements="mx.controls.listClasses.IDropInListItemRenderer">
	<mx:script>
	<[CDATA[
                import mx.controls.advancedDataGridClasses.AdvancedDataGridListData;
		import mx.controls.listClasses.BaseListData;
 
		private var _listData:BaseListData;
 
		public function get listData():BaseListData
		{
			return _listData;
		}
 
		public function set listData( value:BaseListData ):void
		{
			_listData = value;
		}
 
		override public function set data(value:Object):void {
			super.data = value;
			txtInput.text = data[(listData as AdvancedDataGridListData).dataField];
                }
 
		private function handleInputChange():void{
			data[(listData as AdvancedDataGridListData).dataField] = txtInput.text;
		}
	]]>
	</mx:script>
	<mx:textinput width="80" id="txtInput" change="handleInputChange()">
</mx:textinput></mx:box>