2 Replies Latest reply on Mar 30, 2007 3:35 AM by Media Igloo

    HELP! - Populating mutiple DataGrids using nested XML file

    Media Igloo Level 1


      Hi All,

      I'm very very new to flex and object programing so I'm sure this is a real dummies question but I would appreciate any help that anyone can give.

      Firstly, I have a backend application that is returning a nested XML document which I wish to render using 2 DataGrid controls in a parent child manor.

      I have got as far as the attached source by hashing together code snipits from basic examples I have found on the web, but I have to admit I'm running out of patience now!

      What I would like to be able to do is display all the empoyees in the first DataGrid, the when one is highlighted (default the first item in DataGrid on foad) show all the Locations they work at in the data grid below.

      I would then like to be able to add and delete form the site DataGrid and then package this all back up into the XML and send it back to the server.

      I have been able to do this by calling a seperate HTTPService for each grid based on the underlying data tables, but this is eneficent as it calls the server every time I select the user to get the location values. It also means I have to create new logic in the backend to handle the one-to-many relationship manually myself.

      Any help would be greatly appreciated.
      Jason

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="initApp()">

      <mx:Script><![CDATA[
      import mx.controls.dataGridClasses.DataGridColumn;
      private var _xmlDP:XML;
      private function initApp():void
      {
      _xmlDP =
      <employees>
      <employee>
      <firstname gender="male">Fred</firstname>
      <lastname gender="male">Flintstone</lastname>
      <company>Bedrock Mine</company>
      <email>fred@flintstone.com</email>
      <locations>
      <location id="001">
      <city>Bedrock</city>
      <state>CA</state>
      </location>
      <location id="002">
      <city>Tiger Woods</city>
      <state>MA</state>
      </location>
      </locations>
      </employee>
      <employee>
      <firstname gender="male">Barney</firstname>
      <lastname gender="male">Rubble</lastname>
      <company>Bedrock Mine</company>
      <email>barney@rubble.com</email>
      <locations>
      <location id="002">
      <city>Bedrock</city>
      <state>CA</state>
      </location>
      </locations>
      </employee>
      <employee>
      <firstname gender="female">Wilma</firstname>
      <lastname gender="male">Flintstone</lastname>
      <company>Bedrock High School</company>
      <email>Wilma@flintstone.com</email>
      <locations>
      <location id="003">
      <city>Bedrock</city>
      <state>CA</state>
      </location>
      </locations>
      </employee>
      </employees>
      dg1.dataProvider = _xmlDP.employee;
      dg2.dataProvider = _xmlDP.employee[1]; //assign XML XMLList to data Provider
      }//initApp

      private function lfnGeneral(item:Object, column:DataGridColumn):String
      {
      var sLabel:String = ""
      var sHeaderText:String = column.headerText;
      switch (sHeaderText) {
      case "City":
      sLabel = item.locations.location.city;
      break;
      case "State":
      sLabel = item.locations.location.state;
      break;
      case "Gender":
      sLabel = item.firstname.@gender;
      break;
      }

      return sLabel;
      }//lfGeneral

      ]]></mx:Script>

      <mx:Panel title="Employee">
      <mx:DataGrid id="dg1">
      <mx:columns>
      <mx:DataGridColumn headerText="Firstname" dataField="firstname"/>
      <mx:DataGridColumn headerText="lastame" dataField="lastname"/>
      <mx:DataGridColumn headerText="Company" dataField="company" width="200"/>
      <mx:DataGridColumn headerText="Email" dataField="email" width="400"/>
      <mx:DataGridColumn headerText="Gender" labelFunction="lfnGeneral"/>
      <!--<mx:DataGridColumn headerText="City" labelFunction="lfnGeneral"/>
      <mx:DataGridColumn headerText="State" labelFunction="lfnGeneral"/>-->
      </mx:columns>
      </mx:DataGrid>
      </mx:Panel>
      <mx:Panel title="Locations">
      <mx:DataGrid id="dg2" editable="True">
      <mx:columns>
      <mx:Array>
      <mx:DataGridColumn headerText="City" labelFunction="lfnGeneral"/>
      <mx:DataGridColumn headerText="State" labelFunction="lfnGeneral"/>
      </mx:Array>
      </mx:columns>
      </mx:DataGrid>
      </mx:Panel>
      </mx:Application>