The following example formats a column in a flex DataGrid and uses a custom item Renderer to color the text red in a cell if a price is below $0. if the item is greater than $0, the test is displayed in black. the price column is also formatted using a custom label function, which uses a currencyformatter, and finally, the Data Grid column uses a custom sort function to properly sort numeric columns.
Full code after the jump.
View mxml
<?xml version="1.0" encoding="utf-8"?><!-- http://blog.flexexamples.com/2007/08/20/formatting-a-flex-datagrid-control-using-a-custom-item-renderer/ --><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.controls.dataGridClasses.DataGridColumn; import mx.utils.ObjectUtil; private function price_labelFunc(item:Object, column:DataGridColumn):String { return currencyFormatter.format(item.@price); } private function price_sortCompareFunc(itemA:Object, itemB:Object):int { return ObjectUtil.numericCompare(itemA.@price, itemB.@price); } ]]> </mx:Script> <mx:XML id="itemsXML"> <items> <item name="Item 1" price="1.32" /> <item name="Item 2" price="-12.23" /> <item name="Item 3" price="4.96" /> <item name="Item 4" price="-0.94" /> </items> </mx:XML> <mx:Style> .centered { text-align: center; } </mx:Style> <mx:CurrencyFormatter id="currencyFormatter" precision="2" useNegativeSign="false" /> <mx:DataGrid id="dataGrid" dataProvider="{itemsXML.item}"> <mx:columns> <mx:DataGridColumn dataField="@name" headerText="Name:" headerStyleName="centered" /> <mx:DataGridColumn dataField="@price" headerText="Price:" textAlign="right" headerStyleName="centered" labelFunction="price_labelFunc" sortCompareFunction="price_sortCompareFunc" itemRenderer="PriceLabel" /> </mx:columns> </mx:DataGrid></mx:Application>
Pricelabel.
package { import mx.controls.Label; import mx.controls.listClasses.*; public class PriceLabel extends Label { private const POSITIVE_COLOR:uint = 0x000000; // Black private const NEGATIVE_COLOR:uint = 0xFF0000; // Red override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { super.updateDisplayList(unscaledWidth, unscaledHeight); /* Set the font color based on the item price. */ setStyle("color", (data.@price <= 0) ? NEGATIVE_COLOR : POSITIVE_COLOR); } }}
View SourceIs enabled in the following example.
Copy From: http://blog.flexexamples.com/2007/08/20/formatting-a-flex-datagrid-control-using-a-custom-item-renderer/