This is the second of three quick start tutorials that explain best practices for working with the ActionScript 3.0 DataGrid component. This 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.

This article shows you how to do the following tasks with data grids: create columns using the DataGridColumn object, sort columns numerically, determine the current sort column and sort order, and format columns, rows, and headers.

Note: The following examples require that a DataGrid component exists in your document's library.

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

This content requires Flash To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player. To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.

To get the source files for this example, download section5.example1.zip at the top of this page.

Sorting data grid columns numerically

By default, columns are sorted alphabetically. If the user tries to sort a column containing numeric data the columns may not be sorted as expected. In order to specify that a column contains numeric data you must set the column's sortOptions property and specify that the column is numeric using the Array.NUMERIC constant.

Example

The following example uses the DataGridColumn class's sortOptions property to specify that the values in columnB should be sorted numerically when the column's header is clicked:

        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");
colB.sortOptions = Array.NUMERIC;

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

Note: By default columns are sorted alphabetically using a case sensitive sort. If you want to specify that the column should use a case insensitive sort, set the column's sortOptions parameter to Array.CASEINSENSITIVE.

Result

To get the source files for this example, download section6.example1.zip from the top of this page.

Determining the current sort column and sort order

Often when building an application you need to determine the current sort column and sort order, since the user can re-sort columns at any time by clicking on a column's header. The following example shows how to listen for the headerRelease event (DataGridEvent.HEADER_RELEASE) to determine the current sort order after a user clicks on a column header.

Example

The following example creates a DataGrid component instance and traces the current column and sort order when a data grid header is clicked:

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

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

var colA:DataGridColumn = new DataGridColumn("columnA");
var colB:DataGridColumn = new DataGridColumn("columnB");
colB.sortOptions = Array.NUMERIC;

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);
myDataGrid.addEventListener(DataGridEvent.HEADER_RELEASE, headerReleaseHandler);
addChild(myDataGrid);

function headerReleaseHandler(event:DataGridEvent):void {
    var dg:DataGrid = event.currentTarget as DataGrid;
    trace("column: " + String(event.dataField));
    trace("descending: " + String(dg.sortDescending));
}
    

Result

To get the source files for this example, download section7.example1.zip from the top of this page.

Formatting data grid columns

When working with data grids you'll often need to create custom formatting for certain columns. Some examples of custom formatting include: loading numeric data with two or three trailing decimal places, or concatenating two fields (such as first name and last name) and displaying it in one column.

Example

The following example creates a DataGrid component instance and populates it with both text and numeric data:

        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.00});
dp.addItem({columnA:"Row 2A", columnB:56.30});
dp.addItem({columnA:"Row 3A", columnB:789.12});

var colA:DataGridColumn = new DataGridColumn("columnA");
var colB:DataGridColumn = new DataGridColumn("columnB");
colB.sortOptions = Array.NUMERIC;

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 get the source files for this example, download section8.example1.zip from the top of this page.

Note that since columnB is using numeric data instead of strings, the data grid doesn't show trailing zeroes after the decimal points. The next example shows how to format numeric column data the way you want.

Example

You can use the labelFunction property of the DataGridColumn class and the toFixed() method of the Number class to display numeric column data with two decimal places, as shown here:

        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.00});
dp.addItem({columnA:"Row 2A", columnB:56.30});
dp.addItem({columnA:"Row 3A", columnB:789.12});

var colA:DataGridColumn = new DataGridColumn("columnA");
var colB:DataGridColumn = new DataGridColumn("columnB");
colB.sortOptions = Array.NUMERIC;
colB.labelFunction = numberLabelFunction;

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

function numberLabelFunction(item:Object):String {
    return Number(item.columnB).toFixed(2);
}
    

Result

To get the source files for this example, download section8.example2.zip at the top of this page.

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 get the source files for this example, download section9.example1.zip from the top of this page.

Where to go from here

For further information about this topic, see Filtering and formatting data in the DataGrid component (Part 3 of 3). For more information about the ActionScript 3.0 DataGrid component:

"Using the DataGrid" in Using ActionScript 3.0 Components
The DataGrid class in the ActionScript 3.0 Components and Language Reference
Creating, populating, and resizing the DataGrid component (Part 1 of 3)

Customizing and sorting the DataGrid component

by Peter deHaan

Content

Created

Page tools

Requirements

Prerequisite knowledge

User level

Required products

Sample files

Creating data grid columns using the DataGridColumn object

Example

Result

Sorting data grid columns numerically

Example

Result

Determining the current sort column and sort order

Example

Result

Formatting data grid columns

Example

Result

Example

Result

Formatting data grid rows and headers

Example

Result

Where to go from here

Related Flash Quick Starts

More Like This

Products

Solutions

Industries

Help

Learning

Ways to buy

Downloads

Company