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.