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.