Flex 2 Developer's Guide > Building User Interfaces for
Flex Applications > Using Data-Driven Controls > DataGrid control

DataGrid control

The DataGrid control is a list that can display more than one column of data. It is a formatted table of data that lets you set editable table cells, and is the foundation of many data-driven applications.

This topic describes how to create and use DataGrid controls, including how to sort the data. It does not cover information on the following topics, which are often important for creating advanced data grid controls:

How to format the information in each DataGrid cell and control how users enter data in the cells; for information on these topics, see Using Item Renderers and Item Editors.
How to drag objects to and from the data grid; for information on this topic, see Using the Drag and Drop Manager.

For complete reference information, see DataGrid in Adobe Flex 2 Language Reference.

Subtopics

About the DataGrid control

Creating a DataGrid control

Handling events in a DataGrid control

Sorting data in DataGrid controls

DataGrid control user interaction

About the DataGrid control

The DataGrid control provides the following features:

Resizable, sortable, and customizable column layouts, including hidable columns
Optional customizable column and row headers, including optionally wrapping header text
Columns that the user can resize and reorder at run time
Selection events
Ability to use a custom item renderer for any column
Support for paging through data
Locked rows and columns that do not scroll

The following image shows a DataGrid control:

DataGrid control

Rows are responsible for rendering items. Each row is laid out vertically below the previous one. Columns are responsible for maintaining the state of each visual column; columns control width, color, and size.

The DataGrid control has the following default sizing properties:

Property	Default value
Default size	If the columns are empty, the default width is 300 pixels. If the columns contain information but define no explicit widths, the default width is 100 pixels per column. The DataGrid width is sized to fit the width of all columns, if possible. The default number of displayed rows, including the header is 7, and each row, by default, is 20 pixels high.
Minimum size	0
Maximum size	5000 by 5000

Property

Default value

Default size

If the columns are empty, the default width is 300 pixels. If the columns contain information but define no explicit widths, the default width is 100 pixels per column. The DataGrid width is sized to fit the width of all columns, if possible.

The default number of displayed rows, including the header is 7, and each row, by default, is 20 pixels high.

Minimum size

Maximum size

5000 by 5000

Flex 2.01