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.

Data Grid adding and changing columns with item renderers at runtime.

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.

12 Comments:

  1. BobPardoe
     Aug 03, 2007 at 4:34 AM

    I would love to see this extended so that when you click on a line it toggles the checkbox on and off.

    Please could you show us how

    Many thanks

    BOb

  2. MarkM
     Aug 08, 2007 at 3:50 PM

    Same as Bob's request, I was trying to use itemRenderer to dynamically change the display of selected items. But not succeed. I can changed the whole column but not the selected items. If you can show us how to make a checkbox on and off I think I can make it work on the itemRenderer.

  3. Sharad Srivastava
     Aug 10, 2007 at 4:55 AM

    Hi Derrik,
    I was trying to use itemRenderer to dynamically change the display of selected items.Like i need to increase the font of whole row if a column is clicked.Canu give any suggestion how to go for it .
    thanx and regards
    Sharad Srivastava

  4. Drew
     Sep 11, 2007 at 12:51 PM

    The transition on that looks really smooth, way beyond me coding wise though :)

  5. matt
     Oct 17, 2007 at 12:33 PM

    THANKS THANKS THANKS!!!

  6. Thiago Segato
     Dec 30, 2007 at 9:39 AM

    Is beautiful this code...

  7. Mukul
     Feb 07, 2008 at 9:23 AM

    Using this code I get 2 warnings about data binding... One - not being able to detect assignments to dataField, and the other, not being able to detect changes when using square bracket operator. Any thoughts?

  8. mav
     Feb 21, 2008 at 11:40 PM

    same as Mukul's comment how do I over come

  9. Brent Lamborn
     May 21, 2008 at 3:46 PM

    Thanks a lot, I appreciate it.

  10. Matthias Wille
     Aug 25, 2008 at 5:29 PM

    As posted earlier, I get following data binding errors:
    Data binding will not be able to detect changes when using square bracket operator. For Array, please use ArrayCollection.getItemAt() instead.
    Data binding will not be able to detect assignments to "listData".
    Data binding will not be able to detect assignments to "dataField".
    Any ideas to solve this?

  11. jbweb
     Nov 20, 2008 at 5:11 AM

    THANKS THANKS THANKS!!!²

  12. Bren
     Jun 09, 2009 at 3:11 PM

    Nice thanks


Leave a comment

Name: (required)

Email: (required)

URL:

Captcha test: (required)
Comments: (required)

wrap code blocks in <code> </code> tags