# Tweening row colors in datagrid

**URL:** <https://forum.kirupa.com/t/tweening-row-colors-in-datagrid/292968>\
**Category:** flash\
**Created:** [July 21, 2009, 1:34pm UTC](https://forum.kirupa.com/t/tweening-row-colors-in-datagrid/292968 "2009-07-21T13:34:14Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![mullwaden](https://avatars.discourse-cdn.com/v4/letter/m/d07c76/32.png) [@mullwaden](https://forum.kirupa.com/u/mullwaden)\
**Post date:** [July 21, 2009, 1:34pm UTC](https://forum.kirupa.com/t/tweening-row-colors-in-datagrid/292968/1 "2009-07-21T13:34:14Z")

</div>

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

```php

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];
                    }
           
                if(item){
                
                      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){
                if(colorTween)
                    TweenLite.removeTween(colorTween);
                    
                colorTween = TweenLite.to(s, 0, {removeTint:true});
                colorTween = TweenLite.to(s, 1, {tint:item.color_to});

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

```

Any ideas ?