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

by Peter deHaan on December 8, 2008 · 1 Comments

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>
Tagged with: •
 
Share
Facebook Twitter

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

  1. Simon says:
    December 22, 2010 at 2:57 am

    You do not really have to addColumns yourselve. As it turns out, the datagrid grabs the children().name() and uses them as columnheaders.

    So all, that is really necessary – at least if the dataprovider is xml – is this:

    dp = new DataProvider(xmlDP);
    myDataGrid.dataProvider = dp;

    Unfortunately, this method does not alow you to change the column-name to somthing like “% +/-”, that can’t be a nodename.

    The dataprovider seems to be overwritten if you try to change the column-names, so its a kind of Take it or leave it-method.

    But I would like to know if you know some further documentation for this method.

    Reply

Leave a Reply

Your email address will not be published.

You may 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="" highlight="">

Spam Protection by WP-SpamFree