Wednesday, January 5, 2011

AS3 DataGrid component: Part 3

Today we will load data into our grid from an XML file.

It is actually very simple to do.

First, get your XML file ready. In this example I'm using internal XML data (not loading external file, but it works the same way, check out my XML tutorials if you have trouble loading external files):

var myData:XML = <people>
<user Name="John Jenkins" Age="31" Job="Shop manager" />
<user Name="Anna Watson" Age="28" Job="Doctor" />
<user Name="Susan McCallister" Age="29" Job="Chef" />
<user Name="Joe Thompson" Age="32" Job="Janitor" />
<user Name="Bob Anderson" Age="31" Job="Bank assistant" />
<user Name="William Thompson" Age="2" Job="Little kid" />
<user Name="Oscar Anderson" Age="3" Job="Little kid" />
</people>;

To apply it to the datagrid, I don't need to parse it into an array or anything, I simply forward the XML data object to the dataprovider and it does the rest!

myGrid.dataProvider = new DataProvider(myData);

And the results:


Full code:

import fl.data.DataProvider;
import fl.controls.dataGridClasses.DataGridColumn;

myGrid.move(10,10);
myGrid.setSize(300, 100);

var col_name:DataGridColumn = new DataGridColumn("Name");
myGrid.addColumn(col_name);

var col_age:DataGridColumn = new DataGridColumn("Age");
myGrid.addColumn(col_age);
col_age.sortOptions = Array.NUMERIC;

var col_job:DataGridColumn = new DataGridColumn("Job");
myGrid.addColumn(col_job);

myGrid.columns[0].width = 100;
myGrid.columns[1].width = 50;
myGrid.columns[2].width = 150;

var myData:XML = <people>
<user Name="John Jenkins" Age="31" Job="Shop manager" />
<user Name="Anna Watson" Age="28" Job="Doctor" />
<user Name="Susan McCallister" Age="29" Job="Chef" />
<user Name="Joe Thompson" Age="32" Job="Janitor" />
<user Name="Bob Anderson" Age="31" Job="Bank assistant" />
<user Name="William Thompson" Age="2" Job="Little kid" />
<user Name="Oscar Anderson" Age="3" Job="Little kid" />
</people>;

myGrid.dataProvider = new DataProvider(myData);

myGrid.rowCount = myGrid.length;

Thanks for reading!

Related:

AS3 DataGrid component: Part 1
AS3 DataGrid component: Part 2
AS3 DataGrid component: Part 4
AS3 DataGrid component: Part 5
AS3 DataGrid component: Part 6
AS3 DataGrid component: Part 7
AS3 DataGrid component: Part 8
AS3 DataGrid component: Part 9
AS3 DataGrid component: Part 10
AS3 DataGrid component: Part 11
AS3 DataGrid component: Part 12
AS3 DataGrid component: Part 13
AS3 DataGrid component: Part 14
AS3 DataGrid component: Part 15
AS3 DataGrid component: Part 16

4 comments:

Andre said...

Ok, your sample is showing how to load an internal XML, but if I want to load and external?

function salvar_xml_click(e:MouseEvent):void
{
myGrid.dataProvider = new DataProvider(curso);
myGrid.editable=true;
}

var xml_loader:URLLoader = new URLLoader();
xml_loader.load(new URLRequest("curso.xml"));
xml_loader.addEventListener(Event.COMPLETE, show_xml);
var curso:XML;

function show_xml(evt:Event)
{
curso = new XML(evt.target.data);
//trace(curso.topicos.topico.nome.length());
for(var i=0;i<curso.topicos.topico.length();i++)
{
//topicos_curso.htmlText=curso.topicos.topico.nome+"\n"+"Entre outros.";
myGrid.addItem({label:curso.topicos.topico.nome[i]})
}
}

Andre said...

Ok, this is what I did, please reply me if I´m doing in the correct way, at least it works:

salvar_xml.addEventListener(MouseEvent.MOUSE_DOWN, salvar_xml_click);
salvar_xml.buttonMode=true;
function salvar_xml_click(e:MouseEvent):void
{

var xml_loader:URLLoader = new URLLoader();
xml_loader.load(new URLRequest("curso.xml"));
xml_loader.addEventListener(Event.COMPLETE, show_xml);
//myGrid.dataProvider = new DataProvider(curso);
myGrid.editable=true;
myGrid.dataProvider = new DataProvider();
}

Kirill Poletaev said...

You can use the code from this tutorial to load external XML.

In the code you've written, you only start loading the XML once you click the button. That's okay if you want it to be that way, but remember to only update the dataprovider in the show_xml function, after the XML has been completely loaded.

Anonymous said...

Hi your website is really usefull. And Please tell me how to CENTER the HEADERTEXT in dataGrid.
thanks
rosh

Post a Comment