Getting Started with Flex 2 > Lessons > Retrieve and Display Data > Populate a DataGrid control

Populate a DataGrid control

In your application, you want the DataGrid control to display the titles of recent posts and the dates they were posted.

1. In Source mode, enter the following dataProvider property (in bold) in the <mx:DataGrid> tag:

   <mx:DataGrid x="20" y="20" id="dgPosts" width="400" dataProvider="{feedRequest.lastResult.rss.channel.item}">
   

   You want the XML node named item to provide data to the DataGrid control. This node is repeated in the XML, so it will be repeated in the DataGrid.

2. In the first <mx:DataGridColumn> tag, enter the following headerText and dataField property values (in bold):

   <mx:DataGridColumn headerText="Posts" dataField="title"/>
   

   You want the first column in the DataGrid control to display the titles of the posts. You do this by identifying the field in the XML that contains the title data, and then entering this field as the value of the dataField property. In the XML node specified in the dataProvider property (item), the child node called title contains the information you want.

3. In the second <mx:DataGridColumn> tag, enter the following headerText, dataField and width property values (in bold):

   <mx:DataGridColumn headerText="Date" dataField="pubDate" width="150"/>
   

   You want the second column in the DataGrid to display the dates of the posts. In this case, the field that contains the data is called pubDate.

4. Delete the third <mx:DataGridColumn> tag because you don't need a third column.

   The final application should look as follows:

   <?xml version="1.0" encoding="utf-8"?>
   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
       creationComplete="feedRequest.send()" layout="absolute">
   
       <mx:HTTPService 
           id="feedRequest" 
           url="http://weblogs.macromedia.com/mchotin/index.xml" 
           useProxy="false"/>
   
       <mx:Panel x="10" y="10" width="475" height="400" title="{feedRequest.lastResult.rss.channel.title}">
   
           <mx:DataGrid id="dgPosts" x="20" y="20" width="400" dataProvider="{feedRequest.lastResult.rss.channel.item}">
               <mx:columns>
                   <mx:DataGridColumn headerText="Posts" dataField="title"/>
                   <mx:DataGridColumn headerText="Date" dataField="pubDate" width="150"/>
               </mx:columns>
           </mx:DataGrid>
   
           <mx:TextArea x="20" y="175" width="400"/>
           <mx:LinkButton x="20" y="225" label="Read Full Post"/>
       </mx:Panel>
       
   </mx:Application>
   

5. Save the file, wait until Flex Builder finishes compiling the application, and click the Run button in the toolbar.

   A browser opens and runs the application.

   
   
   

   Blog titles and dates should appear in the DataGrid control, confirming that the application successfully retrieved data from the RSS feed and populated the control.

Flex 2.01