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.