Cell Renderers

Cell Renderers in Flex is always a hot topic. I was recently involved with several cell renderer issues. The download contains several interesting examples.

Download file

Note: The solutions to some of these were a team effort.

CheckBoxCellRenderer is your typical cell renderer which replaces boolean values with a check box.

DateChooserCellRenderer pops up a DateChooser when the user clicks the cell or tabs into it. This seems simple enough, but the problem was that you had to click the date twice to select it. The fix was to pop up the DateChooser in response to a mouseDown event and not in the setValue method.

ComboBoxCellRenderer places a ComboBox into a cell. That isn’t too hard, but the difference with this one is that each row item can have its own unique values. Plus this item shows you how you can include validation and get those nifty red borders and pop-up error messages!

MultilineListRenderer is a renderer for a List – but within a ComboBox. That is, when the ComboBox (actually, MultlineComboBox) is clicked, the dropdown doesn’t have 1 line, but 2. You can modify this to have as many lines as you need.

Tip: Your cell renderer gets its data from a field in each row item. If the there is no matching field when your cell renderer updates the item, you may get random information displayed in the cell. For example, if the CheckCellRenderer is put onto a column with a columnName=”pickme” and the dataProvider has no “pickme” fields, the check boxes will be selected at random!

3 Responses to Cell Renderers

  1. That’s an eyes-opener for me~!
    I like..

  2. BB says:

    Hi, I’m using a data grid with your ComboBoxCellRendered, but I want to manage a new event, so I’ve modified your ComboBoxCellRendered:

    function createChildren(Void) : Void {
    trace(‘createChildren combobox in grid’);
    createClassObject(ComboBox, “combo”, 1, {styleName:this, owner:this, selectable:true});
    combo.addEventListener(“change”, this);
    combo.addEventListener(“cellChanged”, this);

    function cellChanged() {
    combo.visible = false;

    In the mxml that contains the datagrid is defined the event and dispatched by the data grid:


    function changeCell(event) {

    and the data grid:


    But it doesn’t work. The cellChange function of the comboBoxCellRendered is never called.I guess I’m doing something wrong.

    Can you help me???



  3. Peter Ent says:

    The function, cellChanged, that you defined in your cell renderer class needs to dispatch the cellChanged event on behalf of the data grid: