Tuesday, 17 September 2013

How to custom format a cell in an AdvancedDataGrid in flex?

How to custom format a cell in an AdvancedDataGrid in flex?

I would like to create an AdvancedDataGrid where one of the cells requires
some layout work involving images and text. Here is the top level view of
the problem that I am trying to solve
(My grid looks like this - Property "name" in the first column and
Property "value" in the second)
<mx:AdvancedDataGrid showHeaders="false" defaultLeafIcon="{null}">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="Property"
headerText="Property" backgroundColor="#E5EFF5" width="0.4"
wordWrap="true"/>
<mx:AdvancedDataGridColumn dataField="Value" headerText="Value"
backgroundColor="white" width="0.6"/>
</mx:columns>
</mx:AdvancedDataGrid>
(The dataProvider for the grid looks something like the following)
var retVal:ArrayCollection = new ArrayCollection([
{Property:'AA', Value:1},
{Property:'BB', Value: <Object that requires custom formatting when
displayed in the grid>},
{Property:'CC', Value:"Simple string"}
]);
Property BB alone has a more complex view involving laying out images and
text in a particular layout. Every other property has a simple string or
numeric value that does not require any special formatting.
Things like itemRenderer are proving to be too difficult to use for me
given that not all my column entries for a given column are formatted in
the same way when displayed inside the grid.
I am using an AdvancedDataGrid because it provides tree like navigation
within the grid (using children) and that is something that I will
eventually need.
An example would be helpful as I am new to flex.
Thank you.

No comments:

Post a Comment