Basic elements

Begin by creating a new movie. Drag the datagrid component into this movie and give it an instance name of "myDataGrid_dg". Then add a button and give it an instance name of "show". Set the label of this button in the property inspector to "show details". Also add a textfield with an instance name of info. Three cars with different colors will be used to show how old the car is. You can follow the below picture to add the elements.

Adding data to the DataGrid

In this example we are not using data from a source outside of flash, instead we are simply hard coding the values in through the DataGridColumn class. To use this, first import the mx.controls.gridclasses.DataGridColumn class. Next we add columns, then using the cellRenderer method we specify which type of content we want to render. In the following example:

In the above code we instantiate a DataGridColumn element, define a couple of properties, then set the cellRenderer property to "ComboBoxCellRenderer". This means that the column will try to display the data through some element in the library with the linkage name of ComboBoxCellRenderer. We need to create three empty Movie Clips, one for each different type of cellRenderer element, name them CheckCellRenderer, ComboBoxCellRenderer and IconCellRenderer.

Right click (or Ctrl-click in Mac) on CheckCellRenderer then, Select linkage and check export for ActionScript. Set mx.controls.cells.CheckCellRenderer as the class. Drag a CheckBox component to the library (just drag the component on stage and delete it, it will stay on the library). Shortly the other two classes will be added.

Next set a dataprovider for the datagrid. The following is an example of this:

We setup an object for each row. The properties should match the names of the columns. But be careful, since the second column is a comboBox, we need to use an array of label/data objects. The first column in this case (checkbox) doesn't need data.

The ComboBoxCellRenderer class

We use four methods in this example, all of which are associated with the CellRenderer. The methods used include: CellRenderer.getPreferredHeight(), CellRenderer.getPreferredWidth(), CellRenderer.setSize() and CellRenderer.setValue(). From the example download files, open up the ComboBoxCellRenderer.as file and take a look. Comments have been added so it's easier to understand.

As you can see we listen for the change event, when that happens we need to manipulate the data in order to keep the view consistent.

The first line calls a reorder() function that was added earlier, this is needed so that the component does not loose it's dataprovider. The reorder function manipulates the comboBox dataprovider to build a list with the selected element in the first position. The reason for doing this is because each time a cell recieves focus, a setValue() method is called. If we do not change this, the combobox would return to default or the dataprovider would be lost. You can test this by changing the above line and publishing, you'll see what I mean.

As you can see the ComboBox becomes empty. Now comment all lines inside the change() function and publish. When you select something and press 'show details', you can see that it lost the selection. So the reorder function simply rebuilds the dataProvider through the editField method, preventing the comboBox from loosing it's data. We have also added a couple of lines to capture seperate labels and data, creating two extra values in each row: ModelName and ModelVal (see show.onPress button handler).

Important: Right Click (or Ctrl-Click on a Mac) the ComboBoxCellRenderer Movie Clip in the library and set the values as shown in the above picture. Remember that the ComboBoxCellRenderer.as file should be in com/flashdb folder below your movie. Add also a Combobox component to the library