Lesson 11. Using DataGrids and Item Renderers

What You Will Learn

In this lesson, you will:

• Define the viewable columns of a DataGrid through DataGridColumn

• Use a labelFunction and an itemRendererDisplay to display DataGridColumn information

• Create an MXML component to be used as an item renderer

• Create an inline custom item renderer for a DataGridColumn

• Raise events from inside an item renderer to the container MXML file of the DataGrid using outerDocument

Approximate Time

This lesson takes approximately 1 hour and 30 minutes to complete.

Lesson Files

Media Files:

None

Starting Files:

Lesson11/start/Dashboard.mxml

Lesson11/start/views/dashboard/ChartPod.mxml

Lesson11/start/views/ecomm/Cart.mxml

Lesson11/start/valueObjects/ShoppingCartItem.as

Completed Files:

Lesson11/complete/Dashboard.mxml

Lesson11/complete/views/dashboard/ChartPod.mxml

Lesson11/complete/views/ecomm/Cart.mxml

Lesson11/complete/valueObjects/ShoppingCartItem.as

Lesson11/complete/renderers/ecomm/ProductName.mxml

In Lesson 8, "Using Controls and Repeaters with Data Sets," you learned about working with data sets and some controls that could be used to show the data. In this lesson, you will build upon that set of base controls and be introduced to the primary MXML component used to display and manipulate large data sets.

In this lesson, you will learn how to use the DataGrid component to display a data set in an interactive way using rows and columns. Aside from using the DataGrid in its simplest form, you will learn how to override the default behavior of a particular column in the DataGrid by implementing a custom item renderer; do a custom sort of the data for a column; and change the editing controls, which manage underlining data.

Here, you see the shopping cart displaying in a DataGrid.