6 Replies Latest reply on May 25, 2010 9:33 PM by $Nith$

    How to bind XML to Datagrid?

    $Nith$ Level 4

      My xml is here:

       

      <?xml version="1.0"?><ITRequests><CallInfo><id type="INT UNSIGNED">42</id><request_no type="VARCHAR">1313_IT_220520100709</request_no><requester_uid type="VARCHAR">administrator</requester_uid><request_date type="VARCHAR">22-May-2010 07:09:34 PM</request_date><title type="VARCHAR">Printer Installation</title><status type="VARCHAR">Closed</status></CallInfo><CallInfo><id type="INT UNSIGNED">43</id><request_no type="VARCHAR">1314_IT_220520100718</request_no><requester_uid type="VARCHAR">administrator</requester_uid><request_date type="VARCHAR">22-May-2010 07:17:49 PM</request_date><title type="VARCHAR">Software Installation</title><status type="VARCHAR">In Progress</status></CallInfo><CallInfo></ITRequests>

       

       

      I don't know how to bind this to a simple datagrid.

       

      Can someone help me please?

       

      PS: The data is in a String variable.

       

      Thanks,

      Nith

        • 1. Re: How to bind XML to Datagrid?
          emerson_rm

          Try this:

           

          <mx:Script>
               <![CDATA[
               import mx.rpc.xml.SimpleXMLDecoder;
               import mx.utils.ArrayUtil;
               import mx.collections.ArrayCollection;
          
               [Bindable] private var array:ArrayCollection = null;
          
               public function bindXMLtoArrayCollection():void {
                              
                            // Data from XML in a String variable.
                    var xml_string:String = "<?xml version=\"1.0\"?><ITRequests><CallInfo><id type=\"INT UNSIGNED\">42</id><request_no type=\"VARCHAR\">1313_IT_220520100709</request_no><requester_uid type=\"VARCHAR\">administrator</requester_uid><request_date type=\"VARCHAR\">22-May-2010 07:09:34 PM</request_date><title type=\"VARCHAR\">Printer Installation</title><status type=\"VARCHAR\">Closed</status></CallInfo><CallInfo><id type=\"INT UNSIGNED\">43</id><request_no type=\"VARCHAR\">1314_IT_220520100718</request_no><requester_uid type=\"VARCHAR\">administrator</requester_uid><request_date type=\"VARCHAR\">22-May-2010 07:17:49 PM</request_date><title type=\"VARCHAR\">Software Installation</title><status type=\"VARCHAR\">In Progress</status></CallInfo></ITRequests>";
                              
                    // Cast String to XML Document.
                    var xml_file:XMLDocument = new XMLDocument(xml_string);
                              
                    // Decode XML to objects.
                    var decoder:SimpleXMLDecoder = new SimpleXMLDecoder();
                    var data:Object = decoder.decodeXML(xml_file);
          
                    // Put objects source in ArrayCollection.
                    array = new ArrayCollection(ArrayUtil.toArray(data.ITRequests.CallInfo));
               }
               ]]>
          </mx:Script>
          <mx:DataGrid id="dataGrid" dataProvider="{array}">
               <mx:columns>
                    <mx:DataGridColumn dataField="id" headerText="id" />
                    <mx:DataGridColumn dataField="requester_uid" headerText="requester_uid" />
               </mx:columns>
          </mx:DataGrid>
          

           

          If it´s resolve, please check de answer helpful.

           

          tks

           

          Emerson_RM

          • 2. Re: How to bind XML to Datagrid?
            emerson_rm Level 1

            Humm, and you must to correct your XML.

            There´s a CallInfo Tag opened in the final of the file.

             

             

            Att,

             

            Emerson_RM

            • 3. Re: How to bind XML to Datagrid?
              rtalton Level 4

              Getting your data in the form a string is a PITA. Can you just use the XML itself, and convert it to an ArrayCollection? Then you could just use an HTTP request, for instance, to retrieve it.

              Anyway, here is the code you need. It also demonstrates using E4X syntax to filter out the root node.

               

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

              <mx:Application

               

               

              xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

              creationComplete="initApp()"

              >

               

              <mx:Script>

              <![CDATA[

               

               

              import mx.collections.XMLListCollection;

               

              import mx.collections.ArrayCollection;

               

               

              private var strData:String = "<?xml version='1.0'?><ITRequests><CallInfo><id type='INT UNSIGNED'>42</id><request_no type='VARCHAR'>1313_IT_220520100709</request_no><requester_uid type='VARCHAR'>administrator</requester_uid><request_date type='VARCHAR'>22-May-2010 07:09:34 PM</request_date><title type='VARCHAR'>Printer Installation</title><status type='VARCHAR'>Closed</status></CallInfo><CallInfo><id type='INT UNSIGNED'>43</id><request_no type='VARCHAR'>1314_IT_220520100718</request_no><requester_uid type='VARCHAR'>administrator</requester_uid><request_date type='VARCHAR'>22-May-2010 07:17:49 PM</request_date><title type='VARCHAR'>Software Installation</title><status type='VARCHAR'>In Progress</status></CallInfo></ITRequests>";

              [

              Bindable]

               

              private var acData:ArrayCollection;

               

               

               

              private function initApp():void{

                   getCallInfo();

              }

               

               

              private function getCallInfo():void{

               

              //Convert string to XML:

               

               

              var sxml:XML = new XML(strData);

               

              //Create an ArrayCollection.

               

               

              //Just get the 'CallInfo' nodes (ignoring the root node, 'ITRequests'):

              acData =

              new ArrayCollection(new XMLListCollection(new XMLList(sxml..CallInfo)).toArray());

               

              trace(acData);

              }

               

               

               

              ]]>

              </mx:Script>

               

              <mx:DataGrid

               

               

              dataProvider="{acData}">

               

               

                   <mx:columns>

               

               

                        <mx:DataGridColumn dataField="id" width="50"/>

               

               

                        <mx:DataGridColumn dataField="request_no" width="180"/>

               

               

                   </mx:columns>

              </mx:DataGrid>

               

               

              </mx:Application>

              1 person found this helpful
              • 4. Re: How to bind XML to Datagrid?
                $Nith$ Level 4

                Thanks for both of you guys!  It works as expected.

                 

                One more question:

                 

                The xml is coming from a Web Service.

                Is there any way to directly convert into ArrayCollection object? (Instead of converting the result into string -> XML -> ArrayCollection)?

                 

                I tried the following but it din't workout.

                 

                function webserviceResultHandler(event:ResultEvent):void

                {

                     var sxml:XML = XML(event.result);

                     array = new ArrayCollection(new XMLListCollection(new XMLList(sxml..CallInfo)).toArray());

                }

                 

                Any Idea??

                 

                Thanks,

                Nith

                • 5. Re: How to bind XML to Datagrid?
                  rtalton Level 4

                  acData = new ArrayCollection(new XMLListCollection(new XMLList(event.result..CallInfo)).toArray());

                   

                  You still have to convert to ArrayCollection; this way, though, you skip using the string.

                   

                  Are you using a .NET Web Service? If so, you can return an array of strongly-typed objects which you can then assign straight to the ArrayCollection like this:

                  acData = event.result as ArrayCollection

                  It's much cleaner, and you will not have to store the data types in the return values as you are doing now. Check out topics on "Value Objects" in Flex. You would create a VO in Flex, and a matching VO in .NET (Data Transfer Object in .NET speak). Both would contain the same data and datatypes. Your .NET Web Service would then return a List of these Value Objects, instead of XML.

                   

                  Here is a .NET VO as a class you can use in your Web Service.

                      public class ITRequest
                      {
                          public int id;
                          public string request_no;
                          public string requester_uid;
                         public string request_date;
                         public string title;
                         public string status;

                      }

                  • 6. Re: How to bind XML to Datagrid?
                    $Nith$ Level 4

                    I am not using .Net web service. Anyways, It works with your first approach very well.

                     

                    Many thanks,

                    Nith