The project setup

In this tutorial we will take a look how ComboBoxes can be added dynamically to a DataGrid control in Flex 3 using Action Script 3. We will us a minimal amount of mxml code and focus on dynamically adding contents with Action Script 3. This approach can be useful if you want don’t know the exact number of columns from the start, possibly because you read the data from a database. We will build the project from the ground up, so if you feel that you already master certain parts you can skip ahead to the next section.

The finished solution will contain an extended DataGrid containing ComboBoxes, in two columns, filled with different values. The first column is a text column containing the name of a person, the second column contains a ComboBox with gender information and the third column contains a ComboBox with age information. Below the DataGrid is a button that when clicked will display the current information in the grid. This information can for instance be saved back into the database.

Classes and objects 

Let’s have a quick look at the classes and objects in the project.

dtGrid

This is the DataGrid displaying the information.

btnFetchValues

This is the button that when clicked will display the grid values in the text area.

txtResult

A  text area displaying the grid values when the button is clicked.

ComboGrid

An extended DataGrid class that will render the ComboBoxes. This is the grid class that will be used instead of the default DataGrid control to display the data.

ComboBoxItem

This class represents one item in a ComboBox. We use a class to easier create the items dynamically, perhaps from XML or database data.

ComboBoxRenderer

This class defines how our ComboBox will operate and what will happen when an item is selected. We make sure that the underlying data in the ComboBoxContent object is changed when an item is selected.

ComboBoxContent

This class defines the underlying data for a ComboBox. We use an object of this class to keep track of the selected data.

The finished project structure will look like this.

Creating the project

The first step is to create the application that will contain the controls and classes.

  1. Open Adobe Flex Builder 3.
  2. Click File-New-Flex Project in the main menu.
  3. Give an appropriate name for the project in the Project name text field, in this tutorial I used ComboBoxGrid.
  4. Click the Finish Button to create the project.

You should now have a project with an MXML Application with the same name as the project containing an empty application MXML tag.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
</mx:Application>

The first thing we will change is the layout of the application. With absolute layout we need to position the controls using x and y values, if we on the other hand change it to vertical layout the controls will automatically be stacked below one another. Simply delete the text absolute and write vertical in the application header.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

Let’s also change the background color from the standard blue-green to a dark gray. Add the backgroundColor statement to the application tag.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="#333333" >

We also need to add an initialization function that will call the functions that creates the rows, columns and controls in the DataGrid. For a function to be called when the application starts after the basic application has been created we need to add a callback function for the application creationComplete event. We start by adding the event call back in the application tag. You can name the function whatever you like, but it’s customary to name it init or something to that effect.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="#333333" creationComplete="init()"  >

Next we need to add a script block that contains the actual function. The easiest way to do this is to place the cursor on an empty line between the application start and end tags and write <script and press enter followed by a > sign, this should add a script block like this

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="#333333"  creationComplete="init()">
   <mx:Script>
      <![CDATA[
   
      ]]>
   </mx:Script>
</mx:Application>

Within the CDATA block we write the functions, fields and properties we want to use in the application. In this case we will add a function named init that doesn’t return any value.

<![CDATA[
   private function init():void
   {
   }
]]>

Import statements

The import statements generally will be added automatically when a control or class is used in the application, but sometimes like if you copy and paste code between applications you need to add them manually. Here’s a list of the imports used in this application. Imports are placed at the top of the CDATA block.

import classes.ComboBoxItem;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.Alert;
import mx.collections.IViewCursor;
import mx.events.ListEvent;
import mx.events.FlexEvent;
import classes.ComboBoxContent;
import mx.collections.ArrayCollection;