This is the first of three quick start tutorials that explain best practices for working with the ActionScript 3.0 DataGrid component. This article shows you how to do the following tasks with data grids: dynamically create a DataGrid instance, specify a data grid's contents using a data provider, resize a DataGrid instance, and create a horizontally scrolling data grid.

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 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 section1.example1.zip at the top of this page.

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:

To get the source files for these examples, download section2.examples.zip at the top of this page.

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

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

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

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

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

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

Where to go from here

For further information about this topic, see Customizing and sorting the DataGrid component (Part 2 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

by Peter deHaan

Content

Created

Page tools

Requirements

Prerequisite knowledge

User level

Required products

Sample files

Dynamically creating a DataGrid instance

Example

Result

Specifying a data grid's contents using a data provider

Example

Result

Resizing a DataGrid instance

Example

Result

Example

Result

Creating a horizontally scrolling DataGrid

Example

Result

Where to go from here

Related Flash Quick Starts

More Like This

Products

Download

Support & Learning

Buy

Company