This
example demonstrates how you can completely customize the "look" of
the datagrid, and although not quite as flexible as
the skinning architecture of Flex 4, this will let you achieve similar results.
The magic
really is a simple function:
cellCustomBackgroundDrawFunction: A
function that lets you control the background drawing mechanism for each cell. By default, each cell will draw a background
on basis of the XXXXColors style property and XXXXRollOverColors style property, where XXXX= header,filter,pager,footer,renderer
or blank. This function offers you the opportunity to hook into this mechanism,
and draw your own background using the graphics property of the FlexDataGridCell object that is passed in as a parameter to
this function. If this function returns false, the default background is not drawn.
In our
example, we define this function as:
private function cellCustomDrawFunction(cell:IFlexDataGridCell):Boolean{
if(cell.rowInfo.isFillRow)return
false; //we do not want to style the fill row (this is the row that fills any
visible white space)
var colors:* = cell.getBackgroundColors();
if(colors is Array){
//just
draw a rounded rect with a
gradient
var mat:Matrix=new
Matrix();
mat.createGradientBox(cell.width-0,cell.height-0,(-90)*Math.PI/180);
cell.graphics.lineStyle(1, cell.verticalGridLineColor);
cell.graphics.beginGradientFill(GradientType.LINEAR,colors,[100,
100],[0x00, 0xFF],mat);
cell.graphics.drawRoundRect(1, 1, cell.width-2, cell.height-2, 20, 20);
cell.graphics.endFill();
}
else{
//simply
draw a rounded rect
cell.graphics.beginFill(colors);
cell.graphics.lineStyle(1, cell.verticalGridLineColor);
cell.graphics.drawRoundRect(1, 1, cell.width-2, cell.height-2, 20, 20);
cell.graphics.endFill();
}
return false;
}
Here,
we're simply drawing a rounded rectangle with a gradient or single color
background. But we could do anything we wanted since we have the graphics
object of the cell.