Learning Flex – Lesson 11, Using DataGrids and Item Renderers

A DataGrid organizes data in a table format with rows and columns that can then be extensively manipulated. This versatility however,  comes at a price in both size and performance.

If you don’t define columns for your DataGrid, it will create them based on the element names in your data. The downside to this is that the order is not guaranteed and using code element names may not result in useful display column names.

Individual columns are defined within an <mx:Columns> tag using <mx:DataGridColumn>.  For each column, you can define headerText (for the column name), dataField (for the element within the dataProvider this column represents) and editable which defines (true or false) if the data can be edited. The DataGrid tag also has an editable attribute which is for the whole grid, individual columns can then be set to false if required. If the dataField itself is a complex object, you can access an element of that object using standard dot notation (object.element)

Manipulating  a DataGrid

The default editing control for a column is textField. It is possible to change this by using the itemEditor and editorDataField attributes. The  editorDataField specifies the attribute of the editor control that will be used to change the value for the cell (for example for a NumericStepper editor, this would probably be value). The following is a list of built in controls you can specify (full package names required):

Button, CheckBox, ComboBox, DateField, Image, label, NumericStepper, Text, TextArea, TextInput.

You may also specify a custom control you have constructed as long as it implements IDropInListItemRenderer. When the grid implements a column with an itemRenderer specified, it creates an instance of the renderer for each row. The implicit data variable is available within the renderer to allow access to the values of the row itself.

DataGridColumn has a labelFunction attribute which can be used to call a function to format data for display. Multiple columns could share the same labelFunction so the function should expect parameters of the data class used by the DataGrid and an object of class DataGridColumn to determine the column used. The function should also return a String.

The attribute variableRowHeight on DataGrid allows it to re-size columns to display the data they contain and could also be used for effects such as “exploding” details from a summary data cell.

Get and Set Functions

Custom class properties can be hidden behind special get and set methods so that other work may be undertaken if a client attempts to read or write to that property.

These functions use the keyword get or set followed by the property name. The property must then be declared private and by convention, is normally declared with a leading underscore. An example would be:

private var _myProp:String;

public function set myProp(propVal:String):void{
_myProp = propVal;
do other work here

public function get myProp():String{
do other work here
return _myProp;


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: