2 Replies Latest reply on Apr 15, 2010 4:39 AM by KidTroopa

    Problem with AdvanceDataGrid XML rendering

    KidTroopa Level 1

      Greetings all.....I am a newbie with Flex 3 and programming in general (hopefully that changes with time).

       

      I decided to start with something simple...and have run into a problem.  This question/discussion is TWO FOLD.

       

      FIRST PROBLEM:  It seems I am unable to get the tree control in an AdvanceDataGrid to populate the child branches of my xml nodes.  This is the xml file I am pointing my mx:HTTPService to:

       

      ==========================

       

      <?xml version="1.0" encoding="utf-8"?>

       

      <mapdata>

           <country name="United States">

                <updated>Mar 14, 2010</updated>

                <ctrimage>images/country/usa.jpg</ctrimage>

                <wiki><![CDATA[<a href="http://en.wikipedia.org/wiki/UnitedStates">United States</a>]]></wiki>

                <location>East Coast</location>

                <continent>North America</continent>

                <state name="New York">

                     <stateimage>images/states/ny.jpg</stateimage>

                </state>

                <state name="New Jersey">

                     <stateimage>images/states/nj.jpg</stateimage>

                </state>

                <state name="Virginia">

                     <stateimage>images/states/va.jpg</stateimage>

                </state>

                <state name="Penn">

                     <stateimage>images/states/pa.jpg</stateimage>

                </state>

                <state name="Washington DC">

                     <stateimage>images/states/dc.jpg</stateimage>

                </state>

           </country>

       

           <country name="Brazil">

                <updated>Mar 14, 2010</updated>

                <ctrimage>images/country/brazil.jpg</ctrimage>

                <wiki><![CDATA[<a href="http://en.wikipedia.org/wiki/UnitedStates">Brazil</a>]]></wiki>

                <location>East</location>

                <continent>South America</continent>

                <state name="Para">

                     <stateimage>images/states/para.jpg</stateimage>

                </state>

                <state name="Bahia">

                     <stateimage>images/states/bahia.jpg</stateimage>

                </state>

                <state name="Tocantins">

                     <stateimage>images/states/tocantins.jpg</stateimage>

                </state>

                <state name="Amazonas">

                     <stateimage>images/states/amazonas.jpg</stateimage>

                </state>

                <state name="Sergipe">

                     <stateimage>images/states/sergipe.jpg</stateimage>

                </state>

           </country>

       

           <country name="Germany">

                <updated>Mar 14, 2010</updated>

                <ctrimage>images/country/germany.jpg</ctrimage>

                <wiki><![CDATA[<a href="http://en.wikipedia.org/wiki/UnitedStates">Germany</a>]]></wiki>

                <location>Central Europe</location>

                <continent>Europe</continent>

                <state name="Lower Saxony">

                     <stateimage>images/states/lsaxony.jpg</stateimage>

                </state>

                <state name="Bavaria">

                     <stateimage>images/states/bavaria.jpg</stateimage>

                </state>

                <state name="Hamburg">

                     <stateimage>images/states/hamburg.jpg</stateimage>

                </state>

                <state name="Thuringia">

                     <stateimage>images/states/thuringia.jpg</stateimage>

                </state>

                <state name="Baden-Wurttemberg">

                     <stateimage>images/states/bberg.jpg</stateimage>

                </state>

           </country>

      </mapdata>

      ==========================

       

      This is an image of the resulting SWF

       

      Picture2.jpg

       

      As you can see....the Country's are not "expandable" and not displaying the State's node.

       

      SECOND PROBLEM:  How do I get the value in the wikipedia nodes to be hyperlink when displayed in the SWF?

       

      Here is the MXML file I've "attempted" :-) to put together:

       

      ====================

       

      <?xml version="1.0" encoding="utf-8"?>

      <mx:Application

       

       

      xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="gridData.send()" >

       

      <mx:Script>

      <![CDATA[

       

       

      import mx.collections.ArrayCollection;

       

      import mx.rpc.events.FaultEvent;

       

      import mx.rpc.events.ResultEvent;

       

      import mx.controls.*;

       

      [

      Bindable]

       

      private var countryList:ArrayCollection;

       

       

      private function countryHandler(evt:ResultEvent):void

      {

      countryList = evt.result.mapdata.country;

      contGroup.refresh();

      }

       

       

       

      private function faultHandler(evt:FaultEvent):void

      {

       

       

      var faultMessage:String = "Could not connect with XML file. The origin of the fault is: " + evt.target;

      Alert.show(faultMessage,

      "Error opening file");

      }

      ]]>

      </mx:Script>

       

      <mx:HTTPService

       

      id="gridData" url="assets/sample.xml" fault="faultHandler(event)" result="countryHandler(event)" />

       

      <mx:AdvancedDataGrid

       

      x="56" y="250" width="950">

       

      <mx:dataProvider>

       

      <mx:GroupingCollection id="contGroup" source="{countryList}">

       

      <mx:Grouping>

       

      <mx:GroupingField name="continent" />

       

      <mx:GroupingField name="location" />

       

      </mx:Grouping>

       

      </mx:GroupingCollection>

       

      </mx:dataProvider>

       

      <mx:columns>

       

      <mx:AdvancedDataGridColumn dataField="name" headerText="Country" />

       

      <mx:AdvancedDataGridColumn dataField="wiki" headerText="Wiki Page" />

       

      <mx:AdvancedDataGridColumn dataField="location" headerText="Location/Region" />

       

      </mx:columns>

      </mx:AdvancedDataGrid>

       

       

      </mx:Application>

       

      =============================

       

      Any and all help would be GREATLY appreciated.

        • 1. Re: Problem with AdvanceDataGrid XML rendering
          Sameer Bhatt Adobe Employee

          First problem's Solution - set childrenField in the  GroupingCollection to "state". The GroupingCollection tag should look  like -

                      <mx:GroupingCollection id="contGroup" 
          source="{countryList}" childrenField="state">

           

          Second problem's Solution - Create a custom item renderer. For example,

                      <mx:AdvancedDataGridColumn dataField="wiki" headerText="Wiki Page">
                          <mx:itemRenderer>
                              <mx:Component>
                                  <mx:Text htmlText="{data.wiki}" />
                              </mx:Component>
                          </mx:itemRenderer>
                      </mx:AdvancedDataGridColumn>
          
          • 2. Re: Problem with AdvanceDataGrid XML rendering
            KidTroopa Level 1

            That worked PERFECTLY!!!  I'm glad it was something simple.  Thank you mucho.  I swore I had tried setting the childrenField before...but must've fat fingered the code somehow.  

             

            Can't thank you enough.