Coloring DataGrid Cells
ColoringCells.MXML
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” xmlns:local=”*” >
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import mx.collections.ArrayCollection;
[Bindable] private var dp:ArrayCollection = new ArrayCollection(
[ {col1:"Toyota", col2:"Corolla", col3:1978},
{col1:"Volkswagen", col2:"New Beetle", col3:2000},
{col1:"Ford", col2:"Mustang", col3:1985},
{col1:"Toyota", col2:"Rav4", col3:2005},
{col1:"Toyota", col2:"Camry", col3:1989},
{col1:"Volkswagen", col2:"Passat", col3:2001},
{col1:"Ford", col2:"Taurus", col3:1992} ]);
/**
* rowColors
*
* This function is called from ColoredBackgroundDataGrid when the background of a row
* needs to be colored; the function returns a single color. The function is given the
* item from the data for the row in question, the row’s index number, the data’s index
* number, and the color that would normally be used for the row, such as one of the
* DataGrid’s alternating-row-colors.
*/
private function rowColors( item:Object, rowIndex:Number, dataIndex:Number, oldColor:uint ) : uint
{
// In this example, if the value from col3 is less than 2000, orange is returned.
// If the item is null – a green is returned.
// Otherwise the default color is returned.
if( item != null && item.col3 < 2000 ) return 0xFF8800;
else if( item == null ) return 0×66AA00;
else return oldColor;
}
/**
* columnGradient
*
* This function is called from ColoredBackgroundDataGrid when the background of a column
* needs to be colored; the function fills the shape given with a gradient.
*
* You can set up the row background color in a similar manner. I’ve just shown you two
* possible ways to handle this.
*/
private function columnGradient(column:DataGridColumn, columnIndex:int, columnShape:Shape, x:Number, y:Number, width:Number, height:Number) : void
{
var m:Matrix = new Matrix();
m.createGradientBox(width,height,0,x,0);
columnShape.graphics.clear();
columnShape.graphics.beginGradientFill(GradientType.LINEAR,[0xFFFF00,0xFF0000],[1,1],[0,255],m);
columnShape.graphics.drawRect(x,y,width,height);
columnShape.graphics.endFill();
}
]]>
</mx:Script>
<mx:TabNavigator width=”716″ height=”325″ historyManagementEnabled=”false” horizontalCenter=”0″ verticalCenter=”0.5″>
<mx:Canvas label=”itemRenderer” width=”100%” height=”100%”>
<!– color the background of a single cell with an itemRenderer. This one, ColoredBackgroundItemRenderer
extends Label, but overrides it updateDisplayList function to draw a gradient-fill
background.
–>
<mx:Text text=”This DataGrid uses an itemRenderer to color the background of specifc cells depending on their value.” width=”177″ left=”10″ top=”29″/>
<mx:DataGrid dataProvider=”{dp}” left=”205″ top=”28″ right=”27″ bottom=”23″>
<mx:columns>
<mx:DataGridColumn headerText=”Make” dataField=”col1″/>
<mx:DataGridColumn headerText=”Model” dataField=”col2″/>
<mx:DataGridColumn headerText=”Year” dataField=”col3″
itemRenderer=”ColoredBackgroundItemRenderer”/>
</mx:columns>
</mx:DataGrid>
</mx:Canvas>
<mx:Canvas label=”backgroundColor” width=”100%” height=”100%”>
<!– the background colors for the columns are set per DataGridColumn. You could also change them in
ActionScript:
var col:DataGridColumn = mygrid.columns[0] as DataGridColumn;
col.setStyle( “backgroundColor”, 0xFF0000 );
the backgroundAlpha style is ignored.
–>
<mx:Text text=”Normal DataGrid with backgroundColor set on DataGridColumns” width=”177″ left=”10″ top=”29″/>
<mx:DataGrid dataProvider=”{dp}” left=”205″ top=”28″ right=”27″ bottom=”23″>
<mx:columns>
<mx:DataGridColumn headerText=”Make”
backgroundColor=”0xCC0000″
dataField=”col1″/>
<mx:DataGridColumn headerText=”Model”
backgroundColor=”0×00CC00″
dataField=”col2″/>
<mx:DataGridColumn headerText=”Year”
backgroundColor=”0×0000CC”
dataField=”col3″/>
</mx:columns>
</mx:DataGrid>
</mx:Canvas>
<mx:Canvas label=”backgroundAlpha” width=”100%” height=”100%”>
<!– the backgroundColor for the columns uses alpha=1. If you want to use any other alpha value,
create a new class that extends DataGrid (eg, ColoredBackgroundDataGrid) and override
the drawColumnBackground function.
–>
<mx:Text text=”Extends DataGrid with drawColumnBackground overridden to set the alpha” width=”177″ left=”10″ top=”29″/>
<local:ColoredBackgroundDataGrid left=”205″ top=”28″
columnBackgroundAlpha=”.4″
dataProvider=”{dp}” right=”27″ bottom=”23″>
<local:columns>
<mx:DataGridColumn headerText=”Make”
backgroundColor=”0xCC0000″
dataField=”col1″/>
<mx:DataGridColumn headerText=”Model”
backgroundColor=”0×00CC00″
dataField=”col2″/>
<mx:DataGridColumn headerText=”Year”
backgroundColor=”0×0000CC”
dataField=”col3″/>
</local:columns>
</local:ColoredBackgroundDataGrid>
</mx:Canvas>
<mx:Canvas label=”Custom Column Background” width=”100%” height=”100%”>
<!– this DataGrid uses the columnBackgroundFunction to create a gradient fill on each column.
Note however, that the columns still have a backgroundColor specified. That’s because without
a backgroundColor, the drawColumnBackground function will never be called.
–>
<mx:Text y=”29″ text=”Extends DataGrid with columnBackgroundFunction that creates a gradient fill for each column” width=”177″ left=”10″/>
<local:ColoredBackgroundDataGrid top=”28″ left=”205″
columnBackgroundFunction=”columnGradient”
columnBackgroundAlpha=”0″
dataProvider=”{dp}” right=”27″ bottom=”23″>
<local:columns>
<mx:DataGridColumn headerText=”Make”
backgroundColor=”0xFFFFFF”
dataField=”col1″/>
<mx:DataGridColumn headerText=”Model”
backgroundColor=”0xFFFFFF”
dataField=”col2″/>
<mx:DataGridColumn headerText=”Year”
backgroundColor=”0xFFFFFF”
dataField=”col3″/>
</local:columns>
</local:ColoredBackgroundDataGrid>
</mx:Canvas>
<mx:Canvas label=”Custom Row Background” width=”100%” height=”100%”>
<!– the background color for the rows is determined by the rowColorFunction.
–>
<mx:Text top=”29″ text=”Extends DataGrid and uses a rowColorFunction to color the background of certain rows depending on the value of column ‘Year’. The rows that do not have any data are filled with a solid color.” width=”177″ left=”10″/>
<local:ColoredBackgroundDataGrid top=”28″ left=”205″
rowColorFunction=”rowColors”
dataProvider=”{dp}” right=”27″ bottom=”23″>
<local:columns>
<mx:DataGridColumn headerText=”Make”
dataField=”col1″/>
<mx:DataGridColumn headerText=”Model”
dataField=”col2″/>
<mx:DataGridColumn headerText=”Year”
dataField=”col3″/>
</local:columns>
</local:ColoredBackgroundDataGrid>
</mx:Canvas>
</mx:TabNavigator>
<mx:Label y=”46″ text=”Coloring DataGrid Cells” horizontalCenter=”0″ textAlign=”center” color=”#ffffff” fontWeight=”bold” fontSize=”16″/>
</mx:Application>
ColoredBackgroundItemRenderer.MXML
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Label xmlns:mx=”http://www.adobe.com/2006/mxml”>
<!–
This item renderer simply extends Label and overrides the updateDisplayList function to
draw a gradient-filled rectangle. The colors in the gradient are determined from the
data.
–>
<mx:Script>
<![CDATA[
import flash.geom.Matrix;
import flash.display.GradientType;
import flash.display.Graphics;
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth,unscaledHeight);
var m:Matrix = new Matrix();
m.createGradientBox(unscaledWidth,unscaledHeight);
var g:Graphics = graphics;
var colors:Array = (data.col3 < 2000 ? [0x0000CC,0x0000FF] : [0x00CC00,0x00FF00]);
g.clear();
g.beginGradientFill(GradientType.LINEAR, colors, [0.2,0.6], [0,255], m);
// the rectangle is drawn a little high and a little tall to compensate for the gap
// the DataGrid introduces between rows.
g.drawRect(0, -2, unscaledWidth, unscaledHeight+4 );
g.endFill();
}
]]>
</mx:Script>
</mx:Label>
ColoredBackgroundDataGrid.as
/**
* ColoredBackgroundDataGrid
*
* This class extends DataGrid and overrides the drawColumnBackground function. This class also introduces
* the property, columnBackgroundAlpha.
*
*/
package
{
import flash.display.GradientType;
import flash.display.Graphics;
import flash.display.Shape;
import flash.display.Sprite;
import flash.geom.Matrix;
import mx.collections.ArrayCollection;
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridColumn;
public class ColoredBackgroundDataGrid extends DataGrid
{
public function ColoredBackgroundDataGrid()
{
super();
}
/**
* The rowColorFunction can be assigned any function which returns a color. The signature of the
* function is:
*
* function rowColorFunction( item:Object, rowIndex:int, dataIndex:int, color:uint ) : uint
*
* The color parameter is the color that would normally be assigned (eg, one of the alternating
* row colors). The item is the data record for the row. If item is null, it means the row has
* no data and is just a filler row.
*
*/
public var rowColorFunction:Function;
/**
* drawRowBackground override
*
* This function is responsible for drawing the background of the row. In this class, if the
* rowColorFunction has been defined, it is called to pick the color. Otherwise the given
* color is used.
*/
override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void
{
if( rowColorFunction != null ) {
var dp:ArrayCollection = dataProvider as ArrayCollection;
var item:Object;
if( dataIndex < dp.length ) item = dp.getItemAt(dataIndex);
color = rowColorFunction( item, rowIndex, dataIndex, color );
}
super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);
}
/**
* columnBackgroundAlpha – the alpha value to use for the column background
*/
public var columnBackgroundAlpha:Number = 1;
/**
* columnBackgroundFunction – this is a function which, if defined, is invoked to
* color the background of a column. The function is given a Shape to fill and
* color.
*/
public var columnBackgroundFunction:Function;
/**
* drawColumnBackground (override)
*
* This function lets the super class draw the background, then it changes its alpha
* to the value of columnBackgroundAlpha property.
*/
override protected function drawColumnBackground(s:Sprite, columnIndex:int, color:uint, column:DataGridColumn):void
{
super.drawColumnBackground(s,columnIndex,color,column);
var background:Shape = Shape(s.getChildByName(columnIndex.toString()));
if( background ) {
background.alpha = columnBackgroundAlpha;
}
if( columnBackgroundFunction != null ) {
var columnShape:Shape = Shape(s.getChildByName(“lines”+columnIndex.toString()));
if( columnShape == null ) {
columnShape = new Shape();
columnShape.name = “lines”+columnIndex;
s.addChild(columnShape);
}
var lastRow:Object = rowInfo[listItems.length - 1];
var xx:Number = listItems[0][columnIndex].x;
var yy:Number = rowInfo[0].y;
var ww:Number = listItems[0][columnIndex].width;
if (this.headerHeight > 0)
yy += rowInfo[0].height;
// Height is usually as tall is the items in the row, but not if
// it would extend below the bottom of listContent
var hh:Number = Math.min(lastRow.y + lastRow.height,
listContent.height – yy);
columnBackgroundFunction( column, columnIndex, columnShape, xx, yy, ww, hh );
}
}
}
}
Leave a Reply