This
example demonstrates the styling support for the Flexicious Ultimate DataGrid.
We
basically made a copy of the GroupedData example, and
made it look like the Messages Pane of Microsoft outlook. The following style
properties were used to achieve this look:
.gridStyle{
fontFamily:"tahoma";
fontSize:"11";
verticalGridLines:false;
horizontalGridLines:true;
headerColors: #EEEEEE,#EEEEEE ;
headerRollOverColors:
#EEEEEE,#EEEEEE ;
headerVerticalGridLineColor:#D0D0D0;
footerColors: #FFFFFF,#FFFFFF ;
footerRollOverColors:
#FFFFFF,#FFFFFF ;
footerVerticalGridLines:false;
footerHorizontalGridLineColor:#EDEDED;
footerStyleName:"myHeader";
headerStyleName:"myHeader";
headerHorizontalGridLineColor:#D0D0D0;
selectionColor:#CEDBEF;
alternatingItemColors:
#FFFFFF,#FFFFFF ;
rollOverColor:#FFFFFF;
disclosureOpenIcon:Embed(source="../assets/images/minus.gif");
disclosureClosedIcon:Embed(source="../assets/images/plus.gif");;
}
In
addition to this, we also set the following properties on the top level for it
to appear a little taller:
horizontalGridLineColor="#99BBE8" horizontalGridLineThickness="2" headerPaddingTop="5" reusePreviousLevelColumns="true"
pagerDrawTopBorder="true" rowHeight="35" paddingTop="15"
Also, we wanted
to show data for the parent level in bold, and children level in normal text,
so we had a function that we wired up via the rendererInitialized
event handler like below:
protected
function grid_rendererInitializedHandler(event:FlexDataGridEvent):void
{
var cell:IFlexDataGridCell=event.cell;
if((cell is IFlexDataGridDataCell)){//the
dg has various types of cells. we only want to style the data cells...
if(cell.level.nestDepth==1){
//at
the first level, we want font to be bold
cell.setStyle("fontWeight","bold");
}
else{
cell.setStyle("fontWeight","normal");
}
}
}
Finally,
we wanted the print to look like the outlook grid as well, so in the before
print handler, we put in the following code:
protected
function grid_beforePrintHandler(event:FlexDataGridPrintEvent):void
{
event.printGrid.styleName="gridStyle";
}
From the
docs:
beforePrint:
Dispatched
when the grid is about to be generated for the print, or the preview.
The event
has a handle to the grid that is being printed, as well as the PrintFlexDataGrid instance. This lets you perform custom
logic on the PrintFlexDataGrid before the print
occurs.
In this
case, we are applying style to the grid before its being sent for print or
preview.