October 23rd, 2007 by Kyle
Tags: datagrid, Flex, item-renderer, itemrenderer, mxml, simple
Posted in: Flex
I can’t count the number of times upon starting to work on a datagrid issue that I turn to the flex docs and copy the code sample at the bottom of the Datagrid API page. Then I usually search around for a simple sample of an itemRenderer that fits my needs. I decided it was high time I posted a simple sample that combined those needs into one sample and was located in an easy place for me and everyone else to find…my blog.
Here is the sample code for the app:
<mx:application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:xmllist id="employees">
<iployee>
<name>Christina Coenraets</name>
<phone>555-219-2270</phone>
<iail>ccoenraets@fictitious.com</iail>
<active>true</active>
</iployee>
<iployee>
<name>Joanne Wall</name>
<phone>555-219-2012</phone>
<iail>jwall@fictitious.com</iail>
<active>true</active>
</iployee>
<iployee>
<name>Maurice Smith</name>
<phone>555-219-2012</phone>
<iail>maurice@fictitious.com</iail>
<active>false</active>
</iployee>
<iployee>
<name>Mary Jones</name>
<phone>555-219-2000</phone>
<iail>mjones@fictitious.com</iail>
<active>true</active>
</iployee>
</mx:xmllist>
<mx:datagrid dataprovider="{employees}" width="600" height="400" editable="true">
<mx:columns>
<mx:datagridcolumn headertext="Name" datafield="name">
<mx:datagridcolumn headertext="Phone" datafield="phone">
<mx:datagridcolumn headertext="Email" datafield="email" itemrenderer="EmailRenderer">
</mx:datagridcolumn>
</mx:datagridcolumn>
</mx:datagridcolumn>
</mx:columns></mx:datagrid></mx:application>
Here is the code for the itemrenderer:
<mx:label xmlns:mx="http://www.adobe.com/2006/mxml">
width="100%" height="100%" paddingLeft="3"
fontWeight="{currentWeight}" fontStyle="{currentStyle}" >
<mx:script>
<!–[CDATA[
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.events.FlexEvent;
private var _listData:DataGridListData;
[Bindable]–> private var currentWeight:String = "normal";
[Bindable]
private var currentStyle:String = "normal";
[Bindable]
override public function set data(value:Object):void{
super.data = value;
if(data){
currentStyle = (data.active == "false" ? "italic" : "normal");
}
dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
}
override public function get data():Object {
return super.data;
}
[Bindable("dataChange")]
override public function get listData():BaseListData
{
return _listData;
}
override public function set listData(value:BaseListData):void
{
_listData = DataGridListData(value);
text=_listData.label;
currentWeight = _listData.label == "ccoenraets@fictitious.com" ? "bold" : "normal";
if(data){
currentStyle = (data.active == "false" ? "italic" : "normal");
}
}
]]>
</mx:script>
</mx:label>
Here is the running app:
Browse the source of this example.
Download a zipfile containing the source to this sample.
Tweet
2 Comments »

June 4th, 2009 at 10:07 am
Great, thanks, was looking for exactly this thing.
September 10th, 2009 at 5:33 pm
Hi! I was surfing and found your blog post… nice! I love your blog.
Cheers! Sandra. R.