Flex 2 : DataGrid Color operations – II

I am continuing in this post about Color Operations with DataGrid in Flex 2. This post also I am giving on one of my friends.

In this post, I am going to show something regarding to the customize color of a particular row in DataGrid. ( e.g. Color of a Total row in DataGrid )

Output is something like :

The code is as below :

(1) MXML file : ColoredDataGrid.mxml

</p>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
        xmlns:dgColor="dgColor.*" pageTitle="Colored DataGrid"  >
    <mx:Script>
    <![CDATA[
        import mx.states.SetStyle;
        import mx.collections.ArrayCollection;
        private var financialDGAC:ArrayCollection = new ArrayCollection([
            {col1:'Income',col2:'45,000',col3:'60,000',col4:'150,000'},
            {col1:'Penalties ',col2:'0',col3:'0',col4:'0'},
            {col1:'Expenses',col2:'5,000',col3:'15,000',col4:'25,000'},
            {col1:'Total',col2:'50,000',col3:'75,000',col4:'175,000'}
            ]);
    ]]>
</mx:Script>
<mx:VBox width="100%" height="100%" paddingLeft="20" paddingTop="20" >
    <mx:Text id="text1" text="Sample of DataGrid with color"
        color="#FFf000" fontWeight="bold" />

    <dgColor:MyRowColorDataGrid dataProvider="{financialDGAC}"
        rowCount="5" rowColorCode="0xFFBD91" useRollOver="false"
        selectable="false" draggableColumns="false" sortableColumns="false" >
        <dgColor:columns>
            <mx:DataGridColumn dataField="col1" headerText="Finance" />
            <mx:DataGridColumn dataField="col2" headerText="A" width="55" />
            <mx:DataGridColumn dataField="col3" headerText="B" width="55" />
            <mx:DataGridColumn dataField="col4" headerText="C" width="60" />
        </dgColor:columns>
    </dgColor:MyRowColorDataGrid>
   </mx:VBox>
</mx:Application>

The Extended component : MyColorRowDataGrid.as is as below

</p>
package dgColor
{
    import mx.controls.DataGrid;
    import flash.display.Sprite;
    import mx.collections.ArrayCollection;
    import flash.text.FontType;
    import flash.events.Event;

    public class MyRowColorDataGrid extends DataGrid
    {
        private var _coloredRowIndex:int;
        private var _rowColorCode:uint;
        private var _setColorRowIndex:Boolean; 

        public function set setColorRowIndex(b:Boolean):void
        {
            _setColorRowIndex = b;           
        }

        public function get setColorRowIndex():Boolean
        {
            return _setColorRowIndex;
        }

        public function set coloredRowIndex(i:int):void
        {
            _coloredRowIndex = i;
        }

        public function get coloredRowIndex():int
        {
            return _coloredRowIndex;
        }

        public function set rowColorCode(colorValue:uint):void
        {
            _rowColorCode = colorValue;
        }

        public function get rowColorCode():uint
        {
            return _rowColorCode;
        }

        override protected function drawRowBackground(s:Sprite,rowIndex:int,y:Number,height:Number,color:uint,dataIndex:int):void
        {
            if(setColorRowIndex == true)
            {
                if(rowIndex == coloredRowIndex)
                {
                    color = rowColorCode;
                    super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);
                }
                else
                    super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);
            }
            else
            {
                if(rowIndex == (dataProvider as ArrayCollection).length-1)
                {
                    color = rowColorCode;
                    super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);
                }
                else
                    super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);
            }
        }
    }
}

Friends, I have not proficiency in Blogging – So for any inconvenience – I am sorry. But very soon I will enhance my skills for that also and definitely try to put the code in a proper manner.

Kindly let me know about any suggestions.

Mayur ….