Custom renderer in datagrid, needs to know if data changed

Question

Hi,
I am hoping someone can help me out please.
I have a datagrid that uses a custom renderer that is
subclassed from a TextInput. When the user changes the data in a
cell, I need to color the cell. This is so that on a potentially
big grid, the user can easily see which cells he has made changes
to.
It is easy enough to set the color of the itemrenderer by
using setStyle() inside the overridden set data() method of the
custom renderer, but that is only a fraction of the solution. Since
Flex instantiates and destroys custom renderers at will depending
on if it is scrolled into view by the datagrid, keeping the state
of whether a value has changed inside the custom rendererer is not
an option.
So the only choice I have is to call back from the custom
renderer into the container that hosts the datagrid. As the
itemEditEnd event is handled in that container, a list of cells
that have had their data changed can be stored. The custom renderer
then needs to call back into the container with its cell
coordinates and ask if the data has changed, and if it has, set its
color.
How can a custom renderer know its cell position as x,y
coordinates? I see that TextInput implements IListItemRenderer
interface and has properties x and y, but putting a trace on these
gives me nonsensical numbers that seem to have no relation to the
cell coordinates.
The other thing I need to do is have the custom renderer call
back into the container that hosts the datagrid to know whether
data has changed. Is outerDocument the reference? Or is there a
proper way of doing this?
Thanks for the help you can give.

Answer 1

Here is a simplified version of how we track the cell by cell
changes in a datagrid. It does require you to identify the fields
that will be editable and maintaining the original data for each
column in the data source.
Our production version is much more complex than this but it
will give you the idea.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="initApp()"
viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.collections.ArrayCollection;
import mx.core.Application;
import flash.events.*;
import mx.events.DataGridEvent;
import mx.controls.TextInput;
[Bindable] public var editAC : ArrayCollection = new
ArrayCollection();
[Bindable]
public var somedata:XML = <datum><item>
<col0>0</col0>
<col1></col1>
<col2></col2>
<col3>2</col3>
<col4></col4>
<col5></col5>
<col6></col6>
<col0Orig>0</col0Orig>
<col1Orig></col1Orig>
<col2Orig></col2Orig>
<col3Orig>2</col3Orig>
<col4Orig></col4Orig>
<col5Orig></col5Orig>
<col6Orig></col6Orig>
</item>
<item>
<col0></col0>
<col1></col1>
<col2></col2>
<col3></col3>
<col4></col4>
<col5></col5>
<col6></col6>
<col0Orig></col0Orig>
<col1Orig></col1Orig>
<col2Orig></col2Orig>
<col3Orig></col3Orig>
<col4Orig></col4Orig>
<col5Orig></col5Orig>
<col6Orig></col6Orig>
</item>
<item>
<col0></col0>
<col1></col1>
<col2></col2>
<col3></col3>
<col4></col4>
<col5></col5>
<col6></col6>
<col0Orig></col0Orig>
<col1Orig></col1Orig>
<col2Orig></col2Orig>
<col3Orig></col3Orig>
<col4Orig></col4Orig>
<col5Orig></col5Orig>
<col6Orig></col6Orig>
</item>
<item>
<col0></col0>
<col1></col1>
<col2></col2>
<col3></col3>
<col4></col4>
<col5></col5>
<col6></col6>
<col0Orig></col0Orig>
<col1Orig></col1Orig>
<col2Orig></col2Orig>
<col3Orig></col3Orig>
<col4Orig></col4Orig>
<col5Orig></col5Orig>
<col6Orig></col6Orig>
</item>
<item>
<col0></col0>
<col1></col1>
<col2></col2>
<col3></col3>
<col4></col4>
<col5></col5>
<col6></col6>
<col0Orig></col0Orig>
<col1Orig></col1Orig>
<col2Orig></col2Orig>
<col3Orig></col3Orig>
<col4Orig></col4Orig>
<col5Orig></col5Orig>
<col6Orig></col6Orig>
</item>
<item>
<col0></col0>
<col1></col1>
<col2></col2>
<col3></col3>
<col4></col4>
<col5></col5>
<col6></col6>
<col0Orig></col0Orig>
<col1Orig></col1Orig>
<col2Orig></col2Orig>
<col3Orig></col3Orig>
<col4Orig></col4Orig>
<col5Orig></col5Orig>
<col6Orig></col6Orig>
</item>
</datum>
private function initApp():void {
var dgcols:Array = grid1.columns;
for (var i:int=1;i<12;i++) {
var dgc:DataGridColumn = new DataGridColumn();
if(i < 6) {
dgc.width=60;
dgc.editable=true;
dgc.dataField="col" + i.toString() ;
dgc.rendererIsEditor=true;
var ir :DGItemRenderer = new DGItemRenderer();
dgc.itemRenderer = ir;
else {
dgc.width=0;
dgc.visible = false
dgc.dataField="col" + i.toString() + "orig" ;
dgcols.push(dgc);
grid1.columns = dgcols;
]]>
</mx:Script>
<mx:DataGrid x="31" y="27" width="200" height="150"
id="grid1" dataProvider="{somedata.children()}"
horizontalScrollPolicy="on" rowHeight="25"
editable="true">
<mx:columns>
<mx:DataGridColumn headerText="Column 0"
dataField="col0" width="30" editable="false"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<mx:TextInput xmlns:mx="
http://www.adobe.com/2006/mxml"
creationComplete="init()"
implements="mx.controls.listClasses.IDropInListItemRenderer,
mx.core.IFactory"
>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.dataGridClasses.DataGridListData;
public function newInstance():* {
var ir : DGItemRenderer = new DGItemRenderer();
return ir;
override public function set data(value:Object):void
super.data = value;
if (value != null) {
var colName : String= DataGridListData(listData).dataField;
var valOrig : String = data[colName + "Orig"];
var val : String = data[colName];
if(valOrig != val)
this.setStyle("backgroundColor",0xA7FF3F);
else
this.setStyle("backgroundColor", "#ffffff");
]]>
</mx:Script>
</mx:TextInput>