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

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 as: DataGrid, DataProvider

M	T	W	T	F	S	S
« Nov				Feb »
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

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

Pages

Recent Posts

Archives

Categories

Blogroll

Advertising

Flashthusiast Feed

twitter.com/pdehaan