Tweening row colors in datagrid

I have managed to color the rows of a data grid object separately, however giving them a nice tween effect is proving to be more tricky. I wish to make it so that when a row is edited it turns gray and then fades back to white.

When I edit a single row this works fine. But when I edit a second row the tween shows up on both of them. The sprite sent to gridColor is indeed the same independently of which line I am editing (weird imo).

(Each element in my dataprovider has two extra values color and color_to so that it knows when to tween. )

package Controls
    import flash.display.Sprite;
    import gs.TweenLite;
    import mx.controls.DataGrid;
    public class ExtendedDataGrid extends DataGrid
        public var rowColorFunction:Function;
        private var colorTween:TweenLite;
        override protected function drawRowBackground(s:Sprite,
        rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void{
            if(rowColorFunction != null && dataProvider != null){
                var item:Object;
                if(dataIndex < dataProvider.length){
                      item = dataProvider[dataIndex];
                      color = rowColorFunction(s, item, rowIndex, dataIndex, color);
            super.drawRowBackground(s, rowIndex, y, height, color, dataIndex);
        public function gridColor(s:Sprite, item:Object, rowIndex:int, dataIndex:int, color:uint):uint{
            if(item.color != item.color_to){
                colorTween =, 0, {removeTint:true});
                colorTween =, 1, {tint:item.color_to});

            item.color_to = item.color;
            return item.color;

Any ideas ?