Flex : DataGrid Color operations

As I have written a long back, I will post for coloring a DataGrid in Flex 2.

One my friend ask me about showing data in different color e.g. If the value is Negative, show it in some Saffron color. And another of my friends asked me to show some data with different colored significance. I thought more or less they both have same requirement. So, I experiment and come up with the code which solves their problem …

The Output is like :

Colored Data Grid - Flex 2


The code-operation is :


<font color="#3366ff">  <?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>
<!&#91;CDATA&#91;
import mx.states.SetStyle;
import mx.collections.ArrayCollection;</font>

<font color="#3366ff">private var financialDGAC:ArrayCollection = new ArrayCollection(&#91;
{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'}
&#93;);
private var operationalDGAC:ArrayCollection = new ArrayCollection(&#91;
{col1:'Srevice',col2:'Significant',col3:'Extreme',col4:'Extreme'},
{col1:'Issues',col2:'5',col3:'Moderate',col4:'Moderate'},
{col1:'Loyalty',col2:5,col3:'Minimal',col4:'Moderate'},
{col1:'Moral',col2:-3,col3:'Minimal',col4:'Moderate'},
{col1:'Image',col2:-2.5,col3:'None',col4:'Minimal'}
&#93;);
&#93;&#93;>
</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"
/>
<mx:DataGrid dataProvider="{operationalDGAC}" rowCount="6" useRollOver="false" selectable="false"
draggableColumns="false" sortableColumns="false" width="350" >
<mx:columns>
<mx:DataGridColumn dataField="col1" headerText="Operations" width="100" />
<mx:DataGridColumn dataField="col2" headerText="A" width="60" > <!--   -->
<mx:itemRenderer>
<mx:Component>
<mx:HBox width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off"
creationComplete="cellColor()"  >
<mx:Script>
<!&#91;CDATA&#91;
private function cellColor():void
{
switch(t.text)
{
case  'Significant' :
this.setStyle('backgroundColor',0xFF00FF);
break;
case '5' :
this.setStyle('color',0x0000FF);
this.setStyle('fontWeight',FontStyle.BOLD);
break;
}
if(Number(t.text) < 0)
{
this.setStyle('color',0xFF7000);
this.setStyle('fontWeight',FontStyle.BOLD);
}
}
&#93;&#93;>
</mx:Script>
<mx:Spacer width="100%" />
<mx:Text id="t" text="{data.col2}" />
<mx:Spacer width="100%" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="B" width="60" >
<mx:itemRenderer>
<mx:Component>
<mx:HBox width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off"
creationComplete="cellColor()"  >
<mx:Script>
<!&#91;CDATA&#91;
private function cellColor():void
{
switch(t.text)
{
case  'Significant' :
this.setStyle('backgroundColor',0xFF00FF);
break;
case 'Extreme' :
this.setStyle('backgroundColor',0xFF0000);
break;
case 'Moderate' :
this.setStyle('backgroundColor',0xFFFF00);
break;
case 'Minimal' :
this.setStyle('backgroundColor',0xAE96CD);
break;
case 'None' :
this.setStyle('backgroundColor',0xFFFFFF);
break;
}
}
&#93;&#93;>
</mx:Script>
<mx:Spacer width="100%" />
<mx:Text id="t" text="{data.col3}" />
<mx:Spacer width="100%" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="C" width="60" >
<mx:itemRenderer>
<mx:Component>
<mx:HBox width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off"
creationComplete="cellColor()"  >
<mx:Script>
<!&#91;CDATA&#91;
private function cellColor():void
{
switch(t.text)
{
case  'Significant' :
this.setStyle('backgroundColor',0xFF00FF);
break;
case 'Extreme' :
this.setStyle('backgroundColor',0xFF0000);
break;
case 'Moderate' :
this.setStyle('backgroundColor',0xFFFF00);
break;
case 'Minimal' :
this.setStyle('backgroundColor',0xAE96CD);
break;
case 'None' :
this.setStyle('backgroundColor',0xFFFFFF);
break;
}
}
&#93;&#93;>
</mx:Script>
<mx:Spacer width="100%" />
<mx:Text id="t" text="{data.col4}" />
<mx:Spacer width="100%" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:Application></font>

Please, let me know if you have any suggestions….. ♥

Advertisements

9 Responses

  1. Nice work! There seems to be a little problem though. Using your code with the sortable property set to true, one can’t sort the DataGrid anymore. If I try to do just that, the cells use wrong styles.

    Greetings from Switzerland

  2. thanks for the GREAT post! Very useful…

  3. I enjoyed reading what you wrote, you should give http://www.sudokulive.net a look for Sudoku puzzles.

  4. Does not work if horizontalScrollPolicy=”on”.
    Any ideas?

  5. This example is in Flex 2.0.1
    with which version you are trying, plz. let me know.

  6. in the code, it says mx:Text id=”t” text=”{data.col4}”

    what is the variable “data”??

  7. Thank you for sharing…

    Biju Subhash

  8. I want the color to the entire row ? how it possible Mayur

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: