How to set background color in grid based on condition in action script file

Question

I have a gird data, and want to set bg color of the grid row based on condition means if there is flag =1 then background grid row will be showing in grey color otherwise as it is in action script file. I used blazeds service.

please help me out. I already tried to setStyle(), but not got success.

Thanks in advance.

Answer 1

This is an actionscript 3 solution. You need to do it in a special itemRenderer class. I suggest you extend the Label class and in it override the updateDisplayList function.

public class DynamicItemRenderer extends Label
{
    private var _backgroundColorFunction:Function=null;

    override protected function commitProperties():void
    {
        super.commitProperties();
        var cellBackgroundColor:Boolean=this.document.hasOwnProperty("cellColorFunction");
        if (cellBackgroundColor && _backgroundColorFunction == null)
        {
            _backgroundColorFunction=this.document.cellColorFunction as Function;
        }
    }

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight);
        if (_backgroundColorFunction != null)
        {
            _backgroundColorFunction.call(this, data, graphics, unscaledWidth, unscaledHeight);
        }
    }
}

Then in the mxml file, where your DataGrid is defined, you need to set up a function that will color the cell, which will be your backgroundColorFunction.

<mx:Script>
    <![CDATA[
        public function cellColorFunction(... args):void
        {
            var item:Object=args[0];
            var g:Graphics=args[1] as Graphics;
            var width:Number=args[2] as Number;
            var height:Number=args[3] as Number;

            g.clear();
            if (grid.isItemSelected(item) || grid.isItemHighlighted(item))
                return;
            if (item.flag == 1)
            {
                g.beginFill(0xE2E2E2);
                g.drawRect(0, 0, width, height + 4);
                g.endFill();
            }
        }
    ]]>
</mx:Script>

Then you need to define the item renderer on your gridColumn and that's it.

<mx:DataGridColumn itemRenderer="path.to.your.DynamicItemRenderer"/>

This is the best solution that I have come up with. If anyone knows a better way I'd like to see it :)