Spark DataGrid column with an itemRenderer and a labelFunction

Ever tried to use an ItemRender and a labelFunction for a Spark DataGrid GridColumn at the same time with the GridItemRenderer template provided by Flash Builder? If you run into problems as well, read on for a simple solution.

I’m not an expert when it comes to the point where you have to override Flex framework methods. However, if you need a custom ItemRenderer for a spark DataGrid, Flash Builder 4.5 creates a template like the following for you.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">
 
   <fx:Script>
      <![CDATA[
         override public function prepare(hasBeenRecycled:Boolean):void {
	    lblData.text = data[column.dataField]
	 }
      ]]>
   </fx:Script>
 
   <s:Label id="lblData" top="9" left="7"/>
 
</s:GridItemRenderer>

But, if you specified a labelFunction for the same GridColumn this ItemRenderer is attached to, you will get an error similar to the following:

1
2

ReferenceError: Error #1069: Property null not found on data and there is no default value.
                at ch.tofuse.renderers::ResultGridItemRenderer/prepare()

The fix is simple, once you understand that the template code for the prepare method is not really safe to use in this case.

Update the prepare method to look as follows.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">
 
   <fx:Script>
      <![CDATA[
         override public function prepare(hasBeenRecycled:Boolean):void {
	   if( column.labelFunction != null ) {
	      lblData.text = column.labelFunction( data, column );
	   } else {
	      lblData.text = data[column.dataField];
	   }
	 }
      ]]>
   </fx:Script>
 
   <s:Label id="lblData" top="9" left="7"/>
 
</s:GridItemRenderer>
RSS 2.0 | Trackback

Leave a Reply

 (required)
 (required)