Creating an application with the DataGrid

To create an application with the DataGrid component, you must first determine where your data is coming from. Typically, data comes from an Array, which you can pull into the grid by setting the dataProvider property. You can also use the methods of the DataGrid and DataGridColumn classes to add data to the grid.

The following example creates a DataGrid to display a softball team's roster. It defines the roster in an Array (aRoster) and assigns it to the DataGrid's dataProvider property.

To use a local data provider with a DataGrid component:

In Flash, select File > New, and then select Flash File (ActionScript 3.0).
Drag the DataGrid component from the Components panel to the Stage.
In the Property inspector, enter the instance name aDg.

Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

import fl.data.DataProvider;

bldRosterGrid(aDg);
var aRoster:Array = new Array();
aRoster = [
        {Name:"Wilma Carter", Bats:"R", Throws:"R", Year:"So", Home: "Redlands, CA"}, 
        {Name:"Sue Pennypacker", Bats:"L", Throws:"R", Year:"Fr", Home: "Athens, GA"},
        {Name:"Jill Smithfield", Bats:"R", Throws:"L", Year:"Sr", Home: "Spokane, WA"},
        {Name:"Shirley Goth", Bats:"R", Throws:"R", Year:"Sr", Home: "Carson, NV"},
        {Name:"Jennifer Dunbar", Bats:"R", Throws:"R", Year:"Fr", Home: "Seaside, CA"},
        {Name:"Patty Crawford", Bats:"L", Throws:"L", Year:"Jr", Home: "Whittier, CA"},
        {Name:"Angelina Davis", Bats:"R", Throws:"R", Year:"So", Home: "Odessa, TX"},
        {Name:"Maria Santiago", Bats:"L", Throws:"L", Year:"Sr", Home: "Tacoma, WA"},
        {Name:"Debbie Ferguson", Bats:"R", Throws:"R", Year: "Jr", Home: "Bend, OR"},
        {Name:"Karen Bronson", Bats:"R", Throws:"R", Year: "Sr", Home: "Billings, MO"},
        {Name:"Sylvia Munson", Bats:"R", Throws:"R", Year: "Jr", Home: "Pasadena, CA"},
        {Name:"Carla Gomez", Bats:"R", Throws:"L", Year: "Sr", Home: "Corona, CA"},
        {Name:"Betty Kay", Bats:"R", Throws:"R", Year: "Fr", Home: 
"Palo Alto, CA"},
];
aDg.dataProvider = new DataProvider(aRoster);
aDg.rowCount = aDg.length;

function bldRosterGrid(dg:DataGrid){
    dg.setSize(400, 300);
    dg.columns = ["Name", "Bats", "Throws", "Year", "Home"];
    dg.columns[0].width = 120;
    dg.columns[1].width = 50;
    dg.columns[2].width = 50;
    dg.columns[3].width = 40;
    dg.columns[4].width = 120;
    dg.move(50,50);
};

The bldRosterGrid() function sets the size of the DataGrid and sets the order of the columns and their sizes.

Select Control > Test Movie.
Notice that you can click any column heading to sort the DataGrid's content in descending order by that column's values.

The following example uses the addColumn() method to add DataGridColumn instances to a DataGrid. The columns represent player names and their scores. The example also sets the sortOptions property to specify the sort options for each column: Array.CASEINSENSITIVE for the Name column and Array.NUMERIC for the Score column. It sizes the DataGrid appropriately by setting the length to the number of rows and the width to 200.

To specify columns and add sorting for a DataGrid component in an application:

In Flash, select File > New, and then select Flash File (ActionScript 3.0).
Drag the DataGrid component from the Components panel to the Stage.
In the Property inspector, enter the instance name aDg.

Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

import fl.controls.dataGridClasses.DataGridColumn;
import fl.events.DataGridEvent;
import fl.data.DataProvider;
// Create columns to enable sorting of data.
var nameDGC:DataGridColumn = new DataGridColumn("name");
nameDGC.sortOptions = Array.CASEINSENSITIVE;
var scoreDGC:DataGridColumn = new DataGridColumn("score");
scoreDGC.sortOptions = Array.NUMERIC;
aDg.addColumn(nameDGC);
aDg.addColumn(scoreDGC);
var aDP_array:Array = new Array({name:"clark", score:3135}, {name:"Bruce", score:403}, {name:"Peter", score:25})
aDg.dataProvider = new DataProvider(aDP_array);
aDg.rowCount = aDg.length;
aDg.width = 200;

Select Control > Test Movie.

The following example creates a DataGrid using ActionScript and populates it with an Array of player names and scores.

To create a DataGrid component instance using ActionScript:

Create a new Flash file (ActionScript 3.0) document.
Drag the DataGrid component from the Components panel to the current document's Library panel.
This adds the component to the library, but doesn't make it visible in the application.

Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

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

var aDg:DataGrid = new DataGrid();
addChild(aDg);
aDg.columns = [ "Name", "Score" ];
aDg.setSize(140, 100);
aDg.move(10, 40);

This code creates the DataGrid instance and then sizes and positions the grid.

Create an array, add data to the array, and identify the array as the data provider for the DataGrid:

var aDP_array:Array = new Array();
aDP_array.push({Name:"Clark", Score:3135});
aDP_array.push({Name:"Bruce", Score:403});
aDP_array.push({Name:"Peter", Score:25});
aDg.dataProvider = new DataProvider(aDP_array);
aDg.rowCount = aDg.length;

Select Control > Test Movie.

The following example uses the DataGridColumn class to create the DataGrid's columns. It populates the DataGrid by passing an XML object as the value parameter of the DataProvider() constructor.

To load a DataGrid with an XML file:

Create a new Flash file (ActionScript 3.0) document.
In the Components panel, double-click the DataGrid component to add it to the Stage.
In the Property inspector, enter the instance name aDg.

Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

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

var teamXML:XML = <team>
        <player name="Player A" avg="0.293" />
        <player name="Player B" avg="0.214" />
        <player name="Player C" avg="0.317" />
</team>;

var nameCol:DataGridColumn = new DataGridColumn("name");
nameCol.headerText = "Name";
nameCol.width = 120;
var avgCol:DataGridColumn = new DataGridColumn("avg");
avgCol.headerText = "Average";
avgCol.width = 60;

var myDP:DataProvider = new DataProvider(teamXML);

aDg.columns = [nameCol, avgCol];
aDg.width = 200;
aDg.dataProvider = myDP;
aDg.rowCount = aDg.length;

Select Control > Test Movie.