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 :

Total Row Color

The code is as below :

(1) MXML file : ColoredDataGrid.mxml

<?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"  >
        import mx.states.SetStyle;
        import mx.collections.ArrayCollection;
        private var financialDGAC:ArrayCollection = new ArrayCollection([
            {col1:'Penalties ',col2:'0',col3:'0',col4:'0'},
<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" >
            <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" />

The Extended component : MyColorRowDataGrid.as is as below

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;
                if(rowIndex == (dataProvider as ArrayCollection).length-1)
                    color = rowColorCode;

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


11 Responses

  1. this datagrid cannot using with httpservice , how come?

  2. Nice blog and thanks for the link 🙂

  3. Takiz,

    I don’t think there could be any problem to using this with HttpService.

    If you can specify more I will try to give you solution.

  4. Hey Thanks for this example….
    Simple and neat example to learn datagrid….
    Keep writing……8)

  5. Hi,

    How can i change the header color on clicking on the datagrid column?

    Please share your thoughts on this.

    Thanks in advance

  6. It doesn’t work !!! Flex 3
    I don’t know why you do not have insert a downloaad link…
    Maybe becouse it doesn’t work

  7. well done but it doesn’t work

  8. Thanks Mayur.

    I have used this feature in one of the applications that I have created.

    But I was trying to extend this so that when i double click on any row then the background color should be again set to white.
    However, I have been unsuccessful in doing so.

    Helpp Please.


  9. this is very great article, it solves a big problem for me
    thank you

  10. Hi..
    thanks for this,
    now i want to change font style/size/color etc. for rows and for header.
    how can i do this?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: