Displaying dynamically loaded XML in a DataGrid control in Flex

The following example shows how you can display dynamically loaded XML data (with namespaces) in a Flex DataGrid control.

Full code after the jump.

View MXML

<?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.

11 thoughts on “Displaying dynamically loaded XML in a DataGrid control in Flex

  1. 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

  2. i am not able to edit the information displayed using the above said labelfunction.
    any solution to that problem.

    thanks in advance

  3. 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.

    1. Anthony,

      It may depend on exactly what you’re trying to do, but hopefully this shows how to delete nodes from an XML object:

      <?xml version="1.0" encoding="utf-8"?> 
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
              layout="vertical"
              verticalAlign="middle"
              backgroundColor="white">
       
          <mx:Script>
              <![CDATA[
                  protected function btn1_clickHandler(evt:MouseEvent):void {
                      delete someXML.nodeToDelete;
                      txtArea.text = someXML.toXMLString();
                  }
       
                  protected function btn2_clickHandler(evt:MouseEvent):void {
                      delete someXML.child.(@label == 'two')[0];
                      txtArea.text = someXML.toXMLString();
                  }
              ]]>
          </mx:Script>
       
          <mx:XML id="someXML">
              <root>
                  <child label="one" />
                  <child label="two" />
                  <child label="three" />
                  <nodeToDelete label="four" />
                  <child label="five" />
                  <nodeToDelete label="six">
                      <child label="seven" />
                      <child label="eight" />
                  </nodeToDelete>
                  <child label="nine" />
              </root>
          </mx:XML>
       
          <mx:ApplicationControlBar dock="true">
              <mx:Button id="btn1"
                      label="delete &lt;nodeToDelete&gt; nodes"
                      click="btn1_clickHandler(event);" />
              <mx:Button id="btn2"
                      label="delete &lt;child label='two'&gt; node"
                      click="btn2_clickHandler(event);" />
          </mx:ApplicationControlBar>
       
          <mx:TextArea id="txtArea"
                  text="{someXML.toXMLString()}"
                  width="300" height="200" />
       
      </mx:Application>

      Peter

  4. 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

  5. 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

  6. Can someone please provide an example for representing an XML schema having only “node labels in an mx:Tree similar to XML represented as an mx:Tree.
    For example

    claimNumber
    Insured

    I want to resolve nodes such as complexType, sequence etc

    Any suggestions or examples are much appreciated.

    Thanks,
    Balaji

Comments are closed.