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 :

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>
<![CDATA[
import mx.states.SetStyle;
import mx.collections.ArrayCollection;</font>

<font color="#3366ff">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'}
]);
private var operationalDGAC:ArrayCollection = new ArrayCollection([
{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'}
]);
]]>
</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>
<![CDATA[
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);
}
}
]]>
</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>
<![CDATA[
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;
}
}
]]>
</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>
<![CDATA[
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;
}
}
]]>
</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….. ♥

---

Possibly related posts: (automatically generated)

• Flex : Container property ” backgroundAttachment “
• Flex : Cotainer class – backgroundAttachment
• Flex 2 : DataGrid Color operations – II
• effect transition