Formatting a Flex DataGrid control using a custom

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.as

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 source is enabled in the following example.

 COPY FROM : http://blog.flexexamples.com/2007/08/20/formatting-a-flex-datagrid-control-using-a-custom-item-renderer/