Generic Flex DataGrid itemRenderers

12 03 2008

Well, yet again there is the generic item challenge.

One interesting thing is how we handle ItemRenderers (and ItemEditors). Personally, I want little icons as an itemRenderer, such as a Tick or a Cross icon.

To overview, a custom itemRenderer is simply some component that can override the set data property. Other than that it is pretty much any UIComponent in FLex you can think of.

However, Flex passes you the data for that row. So, you need to know the name of the field to access the data for that column. Huh.

Well, yes there is this wonderful little thing called listData but it all depends on the Component you extend in your itemRenderer. I like the trusty old HBox, but lo-and-behold, it doesn’t implement the mx.controls.listClasses.IDropInListItemRenderer interface. Huh. Well, I dont want to use an Image control as my component because it gets scaled to fit the row size (*yuk). But hang on, can I just implement a basic getter/setter for listData and expect the DataGrid to manage it all? ahhh, yes.

MyItemRenderer.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:HBox
implements=”mx.controls.listClasses.IDropInListItemRenderer” horizontalAlign=”center” xmlns:mx=”http://www.adobe.com/2006/mxml >
<mx:Script>
<![CDATA[

import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.controls.Image;

private var _data:Object;

// Internal variable for the property value.
private var _listData:BaseListData;

// Make the listData property bindable.
[
Bindable(“dataChange”)]

// Define the getter method.
public function get listData():BaseListData
{

return _listData;
}

// Define the setter method,
public function set listData(value:BaseListData):void
{

_listData = value;

}

override public function set data(value:Object):void {

_data = value;

var icon:Image = new Image();

if (Boolean(_data[DataGridListData(listData).dataField]) === true)
{

//Icons: this is one of my classes, just returns an embedded image
icon.source = Icons.TICK;

this.toolTip = “Yes”;
}

else
{

icon.source = Icons.CROSS;

this.toolTip = “No”;
}

this.removeAllChildren();

this.addChild(icon);

}

override public function get data( ):Object {
return _data;
}

]]>

</mx:Script>
</mx:HBox>

And it is implemented for some DataGrid column thusly:

 

<mx:DataGrid>
<mx:columns>
<mx:DataGridColumn itemRenderer=”MyItemRenderer dataField=”someField />
</mx:columns>
</mx:DataGrid>

 

Advertisements

Actions

Information

8 responses

20 05 2008
Marcus

Thanks! I had a similar problem! You helped me a lot!

10 07 2008
Venkat

Amazing.. Thanks!

14 07 2008
Stephen

Exactly what i was looking for, thanks.

21 07 2009
Cleon

Simple and Awesome! Nicely done.

23 10 2009
Dan G

Brilliant! Exactly what I was looking to do. I wanted an info icon to display a tooltip with text and this works beautifully!

Thanks!

1 06 2010
danv

Thanks, you’ve saved me from a world of pain.

12 07 2010
Gus Leo

amazing, thank’s full for solve my problems

26 07 2011
flashflex

Thank you so much ….

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: