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

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

Advertisements

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.

    Thanks,
    Ruby

  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: