How do I change the style of one individual cell in a Flex DataGrid?

Question

I have a Flex DataGrid where one individual cell needs to be rendered in a different way from others. Specifically, for one row of the grid, one of its cells should be hidden.

The DataGridColumn is set out like this in my .mxml file:

    <mx:DataGridColumn editable="false" dataField="interactive" headerText="Select?" width="45">
        <mx:itemRenderer>
            <mx:Component>
                <mx:CheckBox selectedField="isInteractive"
                             click="data.isInteractive=!data.isInteractive; this.parent.parent.dispatchEvent(new Event('interactive_changed'));" 
                             paddingLeft="5"/>
            </mx:Component>
        </mx:itemRenderer>
    </mx:DataGridColumn>

My initial thought was to add the condition to mx:CheckBox like this:

<mx:CheckBox visible="{!data.isBackground}" ...

but that doesn't work - in fact it messes up the display in a rather entertaining fashion (one of the other cells in the row gets an extra checkbox... go figure).

I suspect it may be possible by using a custom ItemRenderer class but that seems like a lot of code overhead for a fairly simple case. Any thoughts?

(I'm using Flex 3.5 if it's relevant.)

"but that doesn't work" Why not? Do you get a runtime error? Or a compile time error? Or something else? — JeffryHouser
No runtime error, no compile time error, just the weird behaviour: an extra checkbox shows up at the top of the grid cell to the left. — Richard Fairhurst

Jonathan Rowny Jonathan Rowny · Accepted Answer · 2011-06-13T13:44:08

In Flex 3.5 you need a custom itemRenderer.

The way I'd do it is I'd have two states. Normal and "checkbox" and then when you override the data setter in the itemRenderer change your state accordingly.

In Flex 4+ there's an "itemRendererFunction" property on the Spark datagrid where you can programmatically select the itemRenderer which is pretty cool.

How do I change the style of one individual cell in a Flex DataGrid?

1 Answers