Flex FORMATTING DATA GRID ROWS AND HEADERS

When developing applications with the DataGrid component, you may want to use a custom font so the data grid fits with your overall design. YOu change fonts by setting a custom text format using a TextFormat object, and the setStyle() or setRendererStyle() methods. If you want to set the text format for a DataGrid component’s header, use the setStyle() method along with the headerTextFormat style. If you want to set the text format for each row in the DataGrid component, use the setRendererStyle() method along with the textFormat style.

Example

import fl.controls.DataGrid;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;

var comicTextFormat:TextFormat = new TextFormat();
comicTextFormat.font = "Comic Sans MS";

var comicBoldTextFormat:TextFormat = new TextFormat(comicTextFormat.font);
comicBoldTextFormat.bold = true;

var dp:DataProvider = new DataProvider();
dp.addItem({columnA:"Row 1A", columnB:"Row 1B"});
dp.addItem({columnA:"Row 2A", columnB:"Row 2B"});
dp.addItem({columnA:"Row 3A", columnB:"Row 3B"});

var colA:DataGridColumn = new DataGridColumn("columnA");
colA.headerText = "Column A:";

var colB:DataGridColumn = new DataGridColumn("columnB");
colB.headerText = "Column B:";

var myDataGrid:DataGrid = new DataGrid();
myDataGrid.setStyle("headerTextFormat", comicBoldTextFormat);
myDataGrid.setRendererStyle("textFormat", comicTextFormat);
myDataGrid.addColumn(colA);
myDataGrid.addColumn(colB);
myDataGrid.dataProvider = dp;
myDataGrid.width = 200;
myDataGrid.rowCount = myDataGrid.length;
myDataGrid.move(10, 10);
addChild(myDataGrid);

Result

To download the source files for this example, click here.