Working with Flex and Datagrids - Adding Data (
Page 2 of 4 )
Now that our basic DataGrid is showing, let's add some data. The pure MXML way of doing this is to add a <mx:dataProvider> tag followed by an XML, XMLList, or Array Collection tag. Using a data provider is how Flex connects the UI control with the data being displayed in the UI control.
I liken it to having a television in your home. The television serves as the UI component, much like the DataGrid. However, it is useless unless there is a signal telling it what to display. The signal for television is a cable/broadcast signal, while the signal for our DataGrid is the data provider.
Having a DataGrid alone does us no good if we can't add data to it. Flex gives a few different options for how to use a data provider, but in this article I use the XMLList.
<mx:XMLList id="people"> <person>
<firstName>Joe</firstName> <lastName>Young</lastName>
<birthday>1/30/2000</birthday>
</person> <person> <firstName>Joe</firstName>
<lastName>Young</lastName>
<birthday>1/30/2000</birthday> </person> </mx:XMLList>
The above XMLList describes two people with first and last names and their birth dates. We will tell our DataGrid to display the name and birthday of each person found in XMLList. Listing x.x shows the addition of the XMLList in green, along with two new tags called <mx:DataGridColumn> and <mx:columns> listed in blue.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html"> <mx:DataGrid width="100%" height="100%" >
<mx:columns> <mx:DataGridColumn dataField="firstName"/> <mx:DataGridColumn dataField="lastName"/> <mx:DataGridColumn dataField="birthday"/> </mx:columns>
<mx:dataProvider> <mx:XMLList id="people"> <person> <firstName>Joe</firstName> <lastName>Young</lastName> <birthday>1/30/2000</birthday> </person> <person> <firstName>Joe</firstName> <lastName>Young</lastName> <birthday>1/30/2000</birthday> </person> </mx:XMLList> </mx:dataProvider>
</mx:DataGrid>
</mx:Application>
Let's first take a look at the <mx:columns> tag and its children.
<mx:columns>
<mx:DataGridColumn dataField="firstName"/>
<mx:DataGridColumn dataField="lastName"/>
<mx:DataGridColumn dataField="birthday"/>
</mx:columns>
The DataGridColumn has the job of naming the columns of the DataGrid and telling it where in our XMLList to retrieve the data for its column. In our case, the dataField attribute is assigned 'firstName', 'lastName', and 'birthday' respectively. If the XML in the XMLList is properly built, the DataGrid will have no problem finding the data you wish to place in its column, based on the dataField. Note, the DataGridColumn tags are children of the the <mx:columns> tag.
If you compile and run this application, you'll get the following:
Well, that is all we need to produce a basic DataGrid with XML data. For the remainder of this article I'll mention some variations on the basic DataGrid that will help in your own programming.
