Flex Examples
The following example shows how you can display dynamically loaded XML data (with namespaces) in a Flex DataGrid control.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/10/displaying-dynamically-loaded-xml-in-a-datagrid-control-in-flex/ -->
<mx:Application name="DataGrid_XML_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:net="flash.net.*"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
import mx.controls.dataGridClasses.DataGridColumn;
public namespace sitemapNS = "http://www.google.com/schemas/sitemap/0.84";
private function loadXML(targetURL:String):void {
urlLdr.load(new URLRequest(targetURL));
loadBtn.enabled = false;
}
private function urlLdr_complete(evt:Event):void {
var xmlData:XML = new XML(URLLoader(evt.currentTarget).data);
xmlListColl = new XMLListCollection(xmlData.children());
dataGrid.enabled = true;
loadBtn.enabled = true;
}
private function dataGrid_labelFunc(item:XML, col:DataGridColumn):String {
var qN:QName = new QName(sitemapNS, col.dataField);
return item[qN].text();
}
private function dataGrid_dateLabelFunc(item:XML, col:DataGridColumn):String {
var qN:QName = new QName(sitemapNS, col.dataField);
var value:String = item[qN].text();
value = value.replace(/-/g, "/");
value = value.replace("T", " ");
value = value.replace("+00:00", "");
return value;
}
private function dataGrid_itemDoubleClick(evt:ListEvent):void {
use namespace sitemapNS;
var url:String = evt.itemRenderer.data.loc;
navigateToURL(new URLRequest(url), "_blank");
}
]]>
</mx:Script>
<net:URLLoader id="urlLdr"
complete="urlLdr_complete(event);" />
<mx:XMLListCollection id="xmlListColl" />
<mx:ApplicationControlBar dock="true">
<mx:Button id="loadBtn"
label="Load XML"
click="loadXML('http://blog.flexexamples.com/sitemap.xml');" />
<mx:Spacer width="100%" />
<mx:ProgressBar id="progressBar"
mode="event"
source="{urlLdr}"
labelPlacement="center" />
</mx:ApplicationControlBar>
<mx:DataGrid id="dataGrid"
dataProvider="{xmlListColl}"
doubleClickEnabled="true"
itemDoubleClick="dataGrid_itemDoubleClick(event);"
enabled="false"
width="100%"
height="100%">
<mx:columns>
<mx:DataGridColumn dataField="loc"
labelFunction="dataGrid_labelFunc"
itemRenderer="mx.controls.Label" />
<mx:DataGridColumn dataField="lastmod"
labelFunction="dataGrid_dateLabelFunc"
width="150" />
<mx:DataGridColumn dataField="changefreq"
labelFunction="dataGrid_labelFunc"
width="100" />
<mx:DataGridColumn dataField="priority"
labelFunction="dataGrid_labelFunc"
width="100" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
View source is enabled in the following example.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Hey there, does this only work with sitemaps? i wanted to use this with a project i’m working on, but when i pull in my xml data set it doesn’t show the data in the datagrid, but it is there as the double click works fine…
i can upload a sample of my xml and the code how i’ve edited it if that would help, plus i can do a screen shot of the datagrid if needed?
any ideas?
cheers
pete
your posts are great! thank you.. the codes work perfect..
i am not able to edit the information displayed using the above said labelfunction.
any solution to that problem.
thanks in advance
Great example! I would like to be able to edit the list nodes in the XML file it’s communicating with. Basically, to be able to delete a node record. How difficult would it be to make this happen? Any help would be appreciated.
Perhaps another tutorial will demonstrate doing a search and removal node.
Anthony,
It may depend on exactly what you’re trying to do, but hopefully this shows how to delete nodes from an XML object:
Peter
Also posted as http://blog.flexexamples.com/2009/07/23/deleting-nodes-from-an-xml-object-in-flex/
Peter
Peter,
Thank you….
I will certainly test this. Im really trying to build a flex app that will display XML data in a datagrid. I would like to search through the child nodes for a unique node “Artist” ti be displayed. Then I would like to delete that node. Is this dificult to do in flex? I would image I need php in conjuction with flex to get this to work. but I need a starting point.
All your help is much appreciated Peter.
Kimo
@Kimo,
Check out my “Deleting nodes from an XML object in Flex” post.
Peter
Hi Peter,
I guess I may not be clear in what I’m trying to do exactly. Let me try again. I will be using HTTPSERVICE from flex to connect to an XML file just like this link: http://blog.flexexamples.com/2008/12/10/displaying-dynamically-loaded-xml-in-a-datagrid-control-in-flex/comment-page-1/#comment-4830
What I’m looking to do with this example which will help others too. Is to scroll thru the XML nodes that are displayed and locate the one to remove/delete. I need it to delete the record from the XML live.
Thanks for all your help and replies!
Kimo
hey peter,
how do i dispaly dynamic xml or xsd as tree in flex 4.5?