Datagrid runtime item renderers

Aug 01, 2007

My posts on the Flex 2 DataGrid renderers have received a fair amount of traffic and some questions on how to add and/or change the item renderers at runtime. I finally had a need to try this in a project so now I can share the 'how' with everyone else.

Right click to view the source.

• Step 1.

  Create the basic item renderer. One of the things I needed to accomplish with my item renderer was the ability to add it to different columns (ie the dataField was not always the same). This meant I needed a way from within the renderer to determine what column it was bound to so I could get and display the correct data. To do this the renderer needs to implement the IDropInListItemRenderer. This interface allows the renderer to have access to information about the list and column it is in via the BaseListData and DataGridListData classes. The DataGridListData gives you everything you need to get the data required to make a flexible, reusable renderer.

  Here is my basic image item renderer. Nothing to exciting, but it is very reusable. I can drop this into any datagrid to render an image column and it will work.

  <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
  	implements="mx.controls.listClasses.IDropInListItemRenderer">
  	
  	<mx:Script>
  		<![CDATA[
  		import mx.controls.dataGridClasses.DataGridListData;
  		import mx.controls.listClasses.BaseListData;
  			
  		// Make the listData property bindable.
      		[Bindable("dataChange")]
  		private var _listData : BaseListData;    
  			
  		
  		public function get listData() : BaseListData
  		{
  			return _listData;            
  		}                                        
  	
  		public function set listData( value : BaseListData ) : void
  		{
  			_listData = value;
  				
  		}
  		]]>
  	</mx:Script>
  	<mx:Image source="{data[(DataGridListData(listData).dataField)]}"/>
  </mx:Canvas>
  

• Step 2.

  Modify the renderer so that it can be added at runtime. To do this the renderer needs to implement the IFactory interface. This will allow the renderer to be added at any point during runtime. Without implementing this interface it won't work, period. Below is the code to implement the interface.

  <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
  	implements="mx.controls.listClasses.IDropInListItemRenderer, mx.core.IFactory">
  

  public function newInstance():*
  {
     return new ImageRenderer();
  }
  

• Step 3.

  The code to change a column at runtime from a basic column to an item renderer column. Get the columns from the datagrid, modify the column you are interested in and then reassign the columns to the datagrid. Notice that when you set the column's itemRenderer value you must create a new instance of the desired item renderer.

  private function switchStatusColumn(event:MouseEvent):void 
  {
  	var cols:Array = users_dg.columns;
  	var col:DataGridColumn = cols[1] as DataGridColumn;
  	col.itemRenderer = new CheckBoxRenderer();
  	users_dg.columns = cols;	
  }
  

• Step 4.

  The code to add a new column with an item renderer at runtime. This is almost identical to modifying an existing column. The only difference is that we push the new column into the columns array.

  private function addImageColumn(event:MouseEvent):void 
  {
  	var cols:Array = users_dg.columns;
  	var col:DataGridColumn = new DataGridColumn();
  	col.itemRenderer = new ImageRenderer();
  	col.dataField = 'emoticon';
  	col.headerText = 'Image';
  	cols.push(col);
  	users_dg.columns = cols;	
  }
  

Hope this helps all those who were asking how to do this.