Search Flex Samples

Changing text color in a DataGrid using itemRenderers

People constantly ask us how to change cell attributes like text color of individual DataGrid cells depending on data. I just answered a similar question on flexcoders today. If you are making any changes to individual cells, you will almost always use a custom itemRenderers. And… if you are changing the cell attributes depending on data, you will often need to override the set data function in your itemRenderer. Here is a sample of overriding set data to change the text color of a cell’s text if the data in the cell is greater than 10:

override public function set data(value:Object):void
if(value != null)
{ = value;
if(value[DataGridListData(listData).dataField] < 10) {
setStyle(”color”, 0xFF0000);
else {
setStyle(”color”, 0×000000);

Demo: itemSample.swf

Sample Code:itemSample.mxml,

If you want to make appearance of the cell to depend on a particular column’s data, then, you can change the code: value[DataGridListData(listData).dataField] to just use something like value.quantity (assuming “quantity” is the column dataField you are interested in.


Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples