Question

I’ve got a model class with a bunch of Number variables that change frequently.
They all dispatch their custom events, thus are bindable.

In my UI, a couple of those class instances are bundled into an ArrayList that serves as the dataprovider for a Spark DataGrid.
The class variables change perfectly fine, so problem there.

What I’d like to do now is to change the color formatting of those numbers (the corresponding labels in the gridcoloums to be exact) depending on the data that comes in, so to say change in green when the new value is bigger, change to red when the new value is smaller than the old one.

How can I make this work? I though about some sort of caching of the old value and then compare the old and new one.
Is this the way to do this, if so, how? Or is there another, probably simpler way without the need to cache anything?

Any help would be much appreciated!

Edit:
Based on the example given by @NoobsArePeople2, this is my current code.
First the DataGrid. The dataProvider is an ArrayList that holds objects of myModel class.

<s:DataGrid dataProvider="{_listItems}" >
    <s:columns>
        <s:ArrayList>
        <s:GridColumn dataField="change" headerText="Change" itemRenderer="tableCell">
        <s:GridColumn dataField="bid" headerText="Bid" itemRenderer="tableCell">
  ...
</s:DataGrid>

Now the tableCell renderer;

<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" width="100%" height="100%">

<fx:Script>
    <![CDATA[
        private var previousData:Number;
        private var labelColor:uint;
                    private var _data:Object;

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

            previousData = _data;
            _data = Number(value);
            invalidateProperties();
        }

        override protected function commitProperties():void {
            super.commitProperties();

            if(previousData < data) {
                labelColor = 0x40c040;
            } else if (previousData > data){
                labelColor = 0xf05050;
            } else
                labelColor = 0xc0c0c0;

            itemLabel.setStyle("color", labelColor);
            itemLabel.text = String(_data); 
        }   
    ]]>
</fx:Script>

<s:Label id="itemLabel"/>
</s:GridItemRenderer>

This works fine so far (opposed to using the data property which throws an undefined error), however, when using this very item renderer for multiple grid columns, it uses the same values for each grid column. What’s that about?

Edit: Sorry, this works only if I directly address the property of the Model, such like data.property, which I can’t do. I need a general item renderer for all columns.

Answer 1

The way to go is a custom item renderer. An item renderer will come with a data property (where data is a single value from your data provider) that will get set for you when your data provider changes on the DataGrid. You’ll want to

1. Add a new private variable previousData of type Object, and
2. Override the setter for data in your item renderer.

Your setter for data will look something like this:

override public function set data(value:Object):void
{
    // If the data hat not changed, don't do anything
    if (data == value) return;

    // Take the current data and store it in previousData
    previousData = data;

    // Update the current data to the new value that was passed in
    // BEGIN EDIT
    // data = value; <-- Previous code example is wrong it should be:
    super.data = value;
    // END EDIT

    // Tell Flex to update the properties of this renderer
    invalidateProperties();
}

Then, in your item renderer, override the commitProperties() method like this:

override protected function commitProperties():void
{
    super.commitProperties();

    // pseudo code follows
    if (previousData < data)
    {
        labelColor = green;
    }
    else if (previousData > data)
    {
        labelColor = red;
    }
    else
    {
        labelColor = black;
    }

    label.text = data;
    label.color = labelColor;
    // end pseudo code

}

Alternatively, if you need to access properties of data and don’t want to hard code values this should work (note: I haven’t actually tested this code, but it should work just fine).

override protected function commitProperties():void
{
    super.commitProperties();

    // This assumes your item renderer subclasses [GridItemRenderer][2]
    var dataField:String = column.dataField;
    var previousValue:Object = previousData[dataField];
    var currentValue:Object = data[dataField];

    // pseudo code follows
    if (previousValue < currentValue)
    {
        labelColor = green;
    }
    else if (previousValue > currentValue)
    {
        labelColor = red;
    }
    else
    {
        labelColor = black;
    }

    label.text = data;
    label.color = labelColor;
    // end pseudo code
}