1. Home
2. Developer Center
3. Flash Developer Center
4. Flash Quick Start

Flash Quick Starts: Using components

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.

This quick start covers the following topics:

• Creating data grid columns using the DataGridColumn object
• Sorting data grid columns numerically
• Determining the current sort column and sort order
• Formatting data grid columns
• Formatting data grid 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

Download the free Flash Player now!

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

Back to top

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

This content requires Flash

Download the free Flash Player now!

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

Back to top

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

This content requires Flash

Download the free Flash Player now!

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

Back to top

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

This content requires Flash

Download the free Flash Player now!

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

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

This content requires Flash

Download the free Flash Player now!

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

Back to top

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

This content requires Flash

Download the free Flash Player now!

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

Back to top

For more information

For further information about this topic, see Creating, populating, and resizing a DataGrid. 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

Related Flash Quick Starts

• Using the Button component
• Using the Label component
• Getting started with Flash CS3 user interface components
• Creating, populating, and resizing the DataGrid component
• Customizing and sorting the DataGrid component
• Filtering and formatting data in the DataGrid component (New)
• Displaying images with the TileList component

About the author