[Tim Hoff] DataGrid ItemRenderer Example

This is a simple example, how to use either an inline or custom component item renderer with a data grid control. The example shows the various ways that a data grid column can be rendered using dataField, labelFunction, itemRenderer and headerRenderer. MXML and AS examples are included. The example also shows a method to communicate with an itemRenderer using an event listener.

Data grid columns have several methods available to render cell content and format. The default itemRenderer is a text field. Many times, just setting the dataField property is sufficient to display data in a DataGridColumn. However, Flex provides a few rendering options that allow for customization.

dataField:
text field.

labelFunction:
function to change the text of the text field.

itemRenderer:
component class, to fully customize the cell. Can be mxml or action script.

in-line itemRenderer:
In mxml version of itemRenderer. These renderers are coded within the DataGridColumn tags.

headerRenderer:
headerRenderer is an itemRenderer that is applied to the column header. Can add toolTips for grid headers here.
Using the different rendering options depends on the need of the DataGridColumn. The simplest option is recommended.

[ Read more... | Demo ]