Customizing and sorting the DataGrid component

The following quick start demonstrates how to customize data grid columns, sort data grid columns numerically, format numbers in data grid columns using a custom label function, and how to specify a custom text format for both data grid headers and data grid rows.

CREATING DATA GRID COLUMNS USING THE DATAGRIDCOLUMN OBJECT

There are two main ways to add columns to a DataGrid instance:

Pass a string to the data grid’s addColumn() or addColumnAt() method.
Pass a DataGridColumn object (fl.controls.dataGridClasses.DataGridColumn) to the data grid’s addColumn() or addColumnAt() method.

By using the DataGridColumn object, you can control additional attributes of the data grid column, such as the following:

Specify whether the column is editable (DataGridColumn.editable)
Specify whether the column is resizable (DataGridColumn.resizable)
Specify the column’s header text (DataGridColumn.headerText)
Specify a custom function which generates a cell’s text (DataGridColumn.labelFunction)
Specify whether the column is sortable (DataGridColumn.sortable)
Specify sorting options (DataGridColumn.sortOptions)
Specify a custom sorting function (DataGridColumn.sortCompareFunction)

Example

The following example creates a new DataGridColumn instance and adds it to the DataGrid using the addColumn() method:

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

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

var colA:DataGridColumn = new DataGridColumn("columnA");
var colB:DataGridColumn = new DataGridColumn("columnB");

var myDataGrid:DataGrid = new DataGrid();
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.