Working with Flex and Datagrids

Flex 3.0 offers a strong foundation of user interface (UI) controls by which users can harness a great deal of power to create beautiful UIs without having to toil in the details of low level functionality. Of these controls, the DataGrid sets itself apart by offering characteristics similar to a list or tree control (which are also listBase controls), but going further to offer an easy way of displaying columnar data without a complicated interface. In this article, I focus on creating a basic DataGrid and populating it with XML data by using only MXML tags.

Creating a Basic Data Grid

Flex provides an MXML tag to create a DataGrid. Here is our application, with the DataGrid colored in blue:


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="" layout="absolute" viewSourceURL="srcview/index.html"> <mx:DataGrid></mx:DataGrid>

The basics of a Flex application are present: the XML DTD, namespace attribute and the <mx:Application> tag. Most importantly for this lesson, you also see the DataGrid tag. If you compile and run this program you will see the following:


What you see is a DataGrid with no header and no data items. It is very basic so far. Before we continue on to spruce up this DataGrid, let’s make it expand to the width our browser. By doing this, when we re-size our window, the datagrid will grow to the width and height of the web browser. Here is an updated version of the DataGrid tag with our size attributes added:

<mx:DataGrid width="100%" height="100%"></mx:DataGrid>

Try resizing your window to see the effects of our changes. Setting the width and height to "100%" tells Flex that this component should grow as large as it possibly can with reference to its parent container. In this case, the parent is the application, which also takes up as much real estate as possible.

{mospagebreak title=Adding Data}

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>
</person> <person> <firstName>Joe</firstName>
<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="" 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:DataGridColumn dataField="firstName"/>
<mx:DataGridColumn dataField="lastName"/>
<mx:DataGridColumn dataField="birthday"/>

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.

{mospagebreak title=Customizing the Column Headers}

Our current DataGrid uses the "of" dataField to name the columns. This may work in many cases, but you’ll probably want to name your columns something that may be more descriptive or concise. To modify the column headers, you’ll want to use the ‘headerText’ attribute of the DataGridColumn. So, to set our column names to ‘First Name,’ ‘Last Name’ and ‘Date of Birth,’ we’ll modify the DataGridColums to look like this:



Customizing Column Widths

Actionscript does the work of giving our columns a default size. Unfortunately, it has no idea of how wide the column should be in order to give the user the best view. The DataGridColumn tag once again comes to our rescue. In order to set column widths, use the ‘width’ attribute.

<mx:DataGridColumn width="45" dataField="firstName"/>


{mospagebreak title=Hiding Columns}

In certain cases, you may want to hide a DataGrid column. To do this, we use the ‘visible’ attribute of the DataGridColumn tag:


<mx:DataGridColumn visible=’false’ width="45" dataField="firstName"/>


Other DataGridColumn Attributes

Here is a list and short description of other handle attributes of the DataGridColumn tag:

By default, clicking on the header of a column will automatically sort the DataGrid’s data provider. You can turn this function on or off by setting this attribute to true or false.
Sets the minimum width of the column.
Determines whether or not a user can resize the column.
For more information on DataGrids and DataGrid Columns, see the Adobe Language Reference for Flex 3 at
[gp-comments width="770" linklove="off" ]

chat sex hikayeleri Ensest hikaye