Applying Styles to the ibiDataGrid

The ibiDataGrid can be styled by adding Flex Style Code to the MXML file. The code is added directly to the <mx:Style> tags.

Note: The procedures in this appendix are all based on the work done in Building a Basic Dashboard. You must have the basic dashboard created to complete the following steps.

Procedure: How to Add Styles to the ibiDataGrid

With the project SalesDashboard.mxml open, select the Source tab to switch to the plain text view.
Place your cursor after the ending </ibi1:ibiCanvas> tag and before the </mx:Application> tag.

Add the following Adobe code to that section.

<mx:Style>
DataGrid {
   backgroundAlpha: 1;
   headerColors: #990000, #ffffff;
   horizontalGridLines: true;
   horizontalGridLineColor: #ffcc00;
   verticalGridLines: false;
   verticalGridLineColor: #642d2d;
   rollOverColor: #000000;
   textRollOverColor: #ffffff;
   headerStyleName: "mydataGridHeaderStyle";
}
.mydataGridHeaderStyle {
   color: #ffffff;
}	
</mxStyle>

Click the Run button. If prompted, select OK to save and run the project.