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

Flash Quick Start: Using components

Creating, populating, and resizing the DataGrid component

The following quick start explains some of the basics of working with the ActionScript 3.0 DataGrid component.

This quick start covers the following topics:

• Dynamically creating a DataGrid instance
• Specifying a data grid's contents using a data provider
• Resizing a DataGrid instance
• Creating a horizontally scrolling DataGrid

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

Dynamically creating a DataGrid instance

When creating projects with components, you'll often need to create a component instance dynamically instead of at authoring time. Creating a component dynamically allows your applications to be more flexible and your code to be slightly more portable because you can add, reposition and resize instances using ActionScript.

There are two main ways to create a DataGrid component instance in your Flash documents:

• Drag a DataGrid component instance directly onto the Stage and give it an instance name.
• Add a DataGrid component to your document's library and create a new instance using the new operator.

Example

With a DataGrid component symbol already in your Flash document's library, add the following code to the main timeline:

import fl.controls.DataGrid;

var myDataGrid:DataGrid = new DataGrid();
myDataGrid.addColumn("columnA");
myDataGrid.addColumn("columnB");
myDataGrid.addItem({columnA:"Row 1A", columnB:"Row 1B"});
myDataGrid.addItem({columnA:"Row 2A", columnB:"Row 2B"});
myDataGrid.addItem({columnA:"Row 3A", columnB:"Row 3B"});
myDataGrid.width = 200;
myDataGrid.move(10, 10);
addChild(myDataGrid);
      

The previous code imports the DataGrid class, and creates a new instance of the DataGrid component. Next, it adds two data grid columns, columnA and columnB, and adds three items to the data grid's data provider using the addItem() method. Finally, the data grid is resized, repositioned and added to the display list.

Result

This content requires Flash

Download the free Flash Player now!

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

Back to top

Specifying a data grid's contents using a data provider

The previous topic briefly demonstrated how to add items to a data grid using the DataGrid class's addItem() method. In addition to adding items directly to the DataGrid instance, you can also create a new DataProvider object and set the data grid's dataProvider property.

There are three main ways to add items to a DataProvider object:

• Pass an object to the DataProvider class's addItem() method.
• Pass an Array object to the DataProvider class's constructor method.
• Pass an XML object to the DataProvider class's constructor method.

The following examples demonstrate each of these techniques.

Example

The following example populates a DataProvider object using the addItem() method:

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

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 myDataGrid:DataGrid = new DataGrid();
myDataGrid.addColumn("columnA");
myDataGrid.addColumn("columnB");
myDataGrid.dataProvider = dp;
myDataGrid.width = 200;
myDataGrid.move(10, 10);
addChild(myDataGrid);
      

The following example populates a DataProvider object by passing an Array object to the DataProvider class's constructor:

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

var arrDP:Array = new Array();
arrDP.push({columnA:"Row 1A", columnB:"Row 1B"});
arrDP.push({columnA:"Row 2A", columnB:"Row 2B"});
arrDP.push({columnA:"Row 3A", columnB:"Row 3B"});

var dp:DataProvider = new DataProvider(arrDP);

var myDataGrid:DataGrid = new DataGrid();
myDataGrid.addColumn("columnA");
myDataGrid.addColumn("columnB");
myDataGrid.dataProvider = dp;
myDataGrid.width = 200;
myDataGrid.move(10, 10);
addChild(myDataGrid);
      

The following example populates a DataProvider object by passing an XML object to the DataProvider class's constructor:

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

var xmlDP:XML = <items>
        <item columnA="Row 1A" columnB="Row 1B" />
        <item columnA="Row 2A" columnB="Row 2B" />
        <item columnA="Row 3A" columnB="Row 3B" />
    </items>;

var dp:DataProvider = new DataProvider(xmlDP);

var myDataGrid:DataGrid = new DataGrid();
myDataGrid.addColumn("columnA");
myDataGrid.addColumn("columnB");
myDataGrid.dataProvider = dp;
myDataGrid.width = 200;
myDataGrid.move(10, 10);
addChild(myDataGrid);
      

The following example loads an XML document named itemsDP1.xml which is used to populate a DataProvider object:

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

var dp:DataProvider;

var myDataGrid:DataGrid = new DataGrid();
myDataGrid.addColumn("columnA");
myDataGrid.addColumn("columnB");
myDataGrid.width = 200;
myDataGrid.move(10, 10);
addChild(myDataGrid);

var url:String = "examples/itemsDP1.xml";
var req:URLRequest = new URLRequest(url);
var uLdr:URLLoader = new URLLoader();
uLdr.addEventListener(Event.COMPLETE, completeHandler);
uLdr.load(req);

function completeHandler(event:Event):void {
    var ldr:URLLoader = event.currentTarget as URLLoader;
    var xmlDP:XML = new XML(ldr.data);
    dp = new DataProvider(xmlDP);
    myDataGrid.dataProvider = dp;
}
      

The itemsDP1.xml document contains the following XML:

<?xml version="1.0" ?>
<items>
    <item columnA="Row 1A" columnB="Row 1B" />
    <item columnA="Row 2A" columnB="Row 2B" />
    <item columnA="Row 3A" columnB="Row 3B" />
</items>
      

The attributes from the <item> nodes are used as data for each data grid column. You could also use child nodes as seen in the following example:

<?xml version="1.0" ?>
<items>
    <item>
        <columnA><![CDATA[Row 1A]]></columnA>
        <columnB><![CDATA[Row 1B]]></columnB>
    </item>
    <item>
        <columnA><![CDATA[Row 2A]]></columnA>
        <columnB><![CDATA[Row 2B]]></columnB>
    </item>
    <item>
        <columnA><![CDATA[Row 3A]]></columnA>
        <columnB><![CDATA[Row 3B]]></columnB>
    </item>
</items>
      

Result

Each of the previous examples will look like this when it is run:

This content requires Flash

Download the free Flash Player now!

To download the source files for these examples, click here.

Back to top

Resizing a DataGrid instance

There are several ways different ways to resize a DataGrid component on the display list. Previous examples have used the width property to resize the component horizontally. You can also resize a DataGrid instance by setting the height or rowCount property, or by calling the setSize() method.

Note: Resizing a component using the width, height, or rowCount properties or the setSize() method causes a resize (ComponentEvent.RESIZE) event to be dispatched.

Example

The following example resizes a data grid using the setSize() method, which is inherited from the UIComponent class (fl.core.UIComponent):

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

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 myDataGrid:DataGrid = new DataGrid();
myDataGrid.addColumn("columnA");
myDataGrid.addColumn("columnB");
myDataGrid.dataProvider = dp;
myDataGrid.setSize(200, 200);
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.

Example

You can also resize a DataGrid component by using the rowCount property. This allows you to set the number of rows that are at least partially visible in the data grid. The following example resizes the data grid instance to match the number of items in the data provider:

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

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 myDataGrid:DataGrid = new DataGrid();
myDataGrid.addColumn("columnA");
myDataGrid.addColumn("columnB");
myDataGrid.dataProvider = dp;
myDataGrid.width = 200;
myDataGrid.rowCount = myDataGrid.length;
myDataGrid.move(10, 10);
addChild(myDataGrid);
      

Note: The previous example set both the width and rowCount properties. Setting the rowCount property only sets the height of the component, not the width.

Tip: If you want to adjust the height of each row, make sure you set the rowHeight property before setting the rowCount property.

Result

This content requires Flash

Download the free Flash Player now!

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

Back to top

Creating a horizontally scrolling DataGrid

Often when displaying information in a data grid you need to show a lot of information in a small space. In these cases it is useful to create a horizontally scrolling data grid since it allows users to scroll the data grid horizontally as well as vertically to see all the information.

Example

The following example creates a data grid with a width of 150 pixels and sets the horizontalScrollPolicy of "on" (ScrollPolicy.ON):

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

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 myDataGrid:DataGrid = new DataGrid();
myDataGrid.addColumn("columnA");
myDataGrid.addColumn("columnB");
myDataGrid.dataProvider = dp;
myDataGrid.horizontalScrollPolicy = ScrollPolicy.ON;
myDataGrid.width = 150;
myDataGrid.rowCount = myDataGrid.length;
myDataGrid.move(10, 10);
addChild(myDataGrid);
      

This example scrolls horizontally 50 pixels because the DataGrid instance is 150 pixels wide and the two columns are 200 pixels wide (by default each column is 100 pixels wide).

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 Customizing and sorting the 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 (Updated for CS4)
• Using the Label component (Updated for CS4)
• Getting started with Flash CS4 user interface components (Updated for CS4)
• Creating, populating, and resizing the DataGrid component (Updated for CS4)
• Customizing and sorting the DataGrid component (Updated for CS4)
• Filtering and formatting data in the DataGrid component (Updated for CS4)
• Displaying images with the TileList component (Updated for CS4)

About the author