Search Flex Components Free

Custom Search

August 25, 2009

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.


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)


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;  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);


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

Related Flex Tutorials