Flex 3 Basics – Data Grids with XML

The Data Grid Component

The data grid component is one of the best examples how the Flex framework makes ActionScript more accessible. It is surprisingly simple to arrange large amounts of data without miles and miles of code.

It has plenty of usefulness in debugging projects which require extensive loaded data. The simplicity of inserting this component makes it a great way to display the raw information in most external files without having to go back and forth in debug mode.

To demonstrate this, we’ll use a slightly modified version of the XML file used in the original introduction to XML in Flex. You can download the updated file here, and then place it in a folder called assets under the src directory of your Flex project. Here’s a sample of the node structure:

Make a new HTTP Service request that links to the XML file and sends the results to the contentHandler function in E4X format so it can be filtered. Give it an id of siteData so we can reference it directly elsewhere in the code.

Remember that simply writing an HTTPService tag is not enough to load the data. We have to instruct the application to send the request once it loads. For this we’ll tell the HTTPService request to send from the ‘creationComplete’ event to the opening application tag.

Insert a script tag below the opening application tag and make a XML List object to process data in it. Make it bindable, because it will be directly linked to the data grid. This tutorial has more information on data binding basics if you aren’t familiar with the technique.

Now add the following function in to assign the XML contents to our new XML List. Notice that the passed event is of the type ResultEvent. If you are using Flex 3 Builder the correct import statement should be inserted automatically. If you are coding from the SDK, make sure you include the import right below the opening script tag.

Last thing we’ll do is add in the data grid component itself. Copy in the following code to your project first, and an explanation will follow.

Here’s what’s happening within the data grid structure:

  • The VBox control is simply for design purposes and encapsulates the label and grid components.
  • The label displays a title for the grid.
  • The data grid component opening tag sets a width of 600px and binds the data provider to the contents of the fullXML XML list object.
  • The columns tag allows for individual data columns to be loaded and customized.
  • Each data grid column filters a separate field in the XML file and then assign a label to the column header text.

Give it a test run. You should have a nice neat grid that loads the contents of the XML file and organizes it into labeled columns. Go ahead an add another node if you wish. The grid will automatically add it as long as the fields are consistent. Pretty cool!

See the grid in action.
Download the source code.

Posted Sunday, January 4th, 2009 · Back to Top


Add Comment

15 Comments 1 Mentions

  1. Daniel Toma Author Editor

    I’m a Flex 3 tyro, and I’m trying to teach myself the fundamentals. Your tutorials are quite helpful, and I adapted some of the code you provided to construct a dashboard application of my own. As in the example above, I’m populating a datagrid using an external xml file as my source data. However, I’m encountering issues when the field [being filtered by the first column in the datagrid] is empty. Basically, the dashboard crashes when it’s loading the data via the HTTPService call. This doesn’t happen if other fields are empty. It only occurs for the field being filtered by the FIRST column. When I remove those few records from the source file, the dashboard loads without incident. Does this seem like reasonable behavior? Is there a way to “handle” such occurrences so I don’t need to exclude those records?

    Thanks and Regards,
    Daniel Toma


  2. Anthony Anderson Author Editor

    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.


  3. OpenSource Author Editor

    Good work, Appreciated the simple straightforward example.
    $message=”Thanks good job”;
    echo $message


  4. Scott B Author Editor

    Great stuff. Driving myself nuts trying to adapt code for an application I am working on. Two things are evident in the Flex Builder window…both my “creationComplete” and result=”contentHandler(event)” areas of the code are not colorized in the Flex tool as are all other code:value pairs. This may not be my issue, since I have no errors being thrown, but the data is not appearing in my grid. Question…is the location of the xml a subdirectory in your example or can it be any location on the same server?


    • Zach Dunn Author Editor


      If I’m understanding your question correctly, the XML file can be located anywhere. You will simply have to update the link to it. Also, Flex is unable to load files locally so you will need to put it into a testing server environment.


    • Gabriel Author Editor

      @polyGeek: Excellent. You realize, of crosue, that the bit about “by popular demand” meant “because polyGeek asked for it”…I’ll be curious to hear what you think, especially since you were following Flex 4 and effects development pretty closely throughout the release. Enjoy…


  5. Tahir Alvi Author Editor

    This is very example to handle the XML. But i need to populate the google calendar object in datagrid, how i populate that?


  6. venkat Author Editor

    Hi zach,

    I am totally new to flex and i need to develop a GUI for viewing all the configuration files .For example, lets say we have a spring configuration file in which the bean and its dependancies are defined. so i need to display the beanId as well as all the dependant beans within a tree structure. pls help me on this as i got stuck since yesterday not knowing the approach to proceed.Thanks



  7. Pedro Author Editor

    Thanks I search for this for 3 days


  8. Kiet Tuong Author Editor

    It great.
    I think you can use XML object in Flex with xml format string in contructor XML(…). So you will not need to load external xml file.


  9. d Author Editor

    M making a small application in flex where m using php to get data from mysql in XML format i binded this data with a datagrid in one of my modules, previously it was working perfectly but later on m gettin some weird error as mention below:-

    VerifyError: Error #1014: Class IWatcherSetupUtil could not be found.
    at flash.display::MovieClip/nextFrame()
    at mx.core::FlexModuleFactory/deferredNextFrame()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\FlexModuleFactory.as:467]
    at mx.core::FlexModuleFactory/update()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\FlexModuleFactory.as:295]
    at mx.core::FlexModuleFactory/moduleCompleteHandler()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\F

    than when i click on continue i get this….

    ReferenceError: Error #1065: Variable _DataGridStyle__embed_css_Assets_swf_cursorStretch_187066769 is not defined.

    at flash.display::MovieClip/nextFrame()
    at mx.core::FlexModuleFactory/deferredNextFrame()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\FlexModuleFactory.as:467]
    at mx.core::FlexModuleFactory/update()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\FlexModuleFactory.as:295]
    at mx.core::FlexModuleFactory/moduleCompleteHandler()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\FlexModuleFactory.as:542]

    Please help me if u can


  10. abcdefg Author Editor



  11. Sudharsanan Author Editor

    Can I implement the same in xampp server
    with XML file contains in it.
    I want the data of xml to DataGrid


  12. Sudharsanan Author Editor

    Any one say how to append the data in External XML file


  13. Norman Carmany Author Editor

    I enjoy looking at and I think this website got some truly useful stuff on it!



Build Internet by One Mighty Roar. Since 2008.