Home » Documentation » Flex DataGrid

Flex DataGrid Control (mx.controls.DataGrid)

The DataGrid control (mx.controls.DataGrid) displays tabular data (rows and columns) in a Flex application.

TODO: embed example (DataGrid1)

The code below gives an example of creating a simple, empty DataGrid with three columns.

   <mx:DataGrid>
      <mx:columns>
         <mx:DataGridColumn headerText="First Name" />
         <mx:DataGridColumn headerText="Last Name" />
         <mx:DataGridColumn headerText="Email Address" />
      </mx:columns>
   </mx:DataGrid>

Populating a DataGrid

To populate a DataGrid we'll have to provide it with data via the dataProvider property, and we'll have to tell each column which field in the provided data to use via it's dataField property.

   <mx:DataGrid dataProvider="{this.contacts}">
      <mx:columns>
         <mx:DataGridColumn headerText="First Name" dataField="firstName" />
         <mx:DataGridColumn headerText="Last Name" dataField="lastName" />
         <mx:DataGridColumn headerText="Email Address" dataField="emailAddress" />
      </mx:columns>
   </mx:DataGrid>
   
   <mx:Array id="contacts">
      <mx:Object firstName="Joe" lastName="Smith" emailAddress="joe@smith.com" />
      <mx:Object firstName="Sally" lastName="Lally" emailAddress="sally@lally.com" />
      <mx:Object firstName="Albert" lastName="Rigdon" emailAddress="albert@rigdon.com" />
   </mx:Array>

The above code does three things:

Creates an array of objects (with id=contacts)
Assigns the array as the <mx:DataGrid>'s dataProvider property
Specifies each <mx:DataGridColumn>'s dataField property

TODO... embed example (X_DataGrid1)

Of course data in real world applications isn't going to be static as in the examples. For rich, dynamic data will make use of Data Providers.

Populating a DataGrid with XML

The below example is very similar to the one above except XML is used as the dataProvider. Note that each <mx:DataGridColumn>'s dataField property is prefixed with @ for referencing an XML attribute.

   <mx:DataGrid dataProvider="{this.contactsXML.contact}">
      <mx:columns>
         <mx:DataGridColumn headerText="First Name" dataField="@firstName" />
         <mx:DataGridColumn headerText="Last Name" dataField="@lastName" />
         <mx:DataGridColumn headerText="Email Address" dataField="@emailAddress" />
      </mx:columns>
   </mx:DataGrid>
   
   <mx:XML id="contactsXML">
      <contacts>
         <contact firstName="Joe" lastName="Smith" emailAddress="joe@smith.com" />
         <contact firstName="Sally" lastName="Lally" emailAddress="sally@lally.com" />
         <contact firstName="Albert" lastName="Rigdon" emailAddress="albert@rigdon.com" />
      </contacts>
   </mx:XML>

Handling DataGrid Events

The above example also shows how a DataGrid can dispatch events, for instance when a row is clicked on.

Advanced DataGrid Features

The DataGrid control provides the following features:

Columns of different widths or identical fixed widths
Columns that the user can resize at runtime
Columns that the user can reorder at runtime
Optional customizable column headers
Ability to use a custom item renderer for any column to display data other than text
Support for sorting the data by clicking on a column

Column Sorting

TODO...

Learn more about Collection Sorting...