Specifying a data grid’s contents using a data provider in Flash using ActionScript 3.0

by Peter deHaan on December 8, 2008

in DataGrid

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.

Full code after the jump.

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

// ActionScript 3.0
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:

// ActionScript 3.0
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:

// ActionScript 3.0
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:

// ActionScript 3.0
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(evt:Event):void {
    var ldr:URLLoader = evt.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 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>

{ 0 comments… add one now }

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Previous post:

Next post: