MX DataGrid, List and VariableRowHeight

This issue seems to come up frequently:  Someone wants to use a renderer that has a flow-based component like mx:Text or the new Spark Label or Spark RichEditableText and wants the rows to be of variable heights.  Trouble ensues.

There is a key aspect of the MX item renderer lifecycle that has to be accounted for in these scenarios, and that is that, before a renderer is measured, the host List or DataGrid will set the explicitWidth of the renderer to the width of the list or the datagrid column.  This is important since the renderer’s measuredHeight is dependent on the width of the flow-based text components.  If this isn’t handled correctly, the renderer may clip text and/or make it impossible to calculate the exact size of the List or DataGrid.

This also implies that using percent width in a renderer won’t help as percentWidth isn’t applied until after measurement.  You have to tie the width of any flow-based component to the explicitWidth of the renderer so that the measuredHeight is reported correctly.  Sometimes that will require overriding the measure() method, but often you can just use data-binding.

Here  is an example of a custom flow-based renderer.  It draws a square in the upper-left corner and then flows text to the right of it onto multiple lines.  I use data-binding in this example to set the width of the mx:Text so it will then report its measuredHeight correctly.  That allows me to figure out the exact height of the DataGrid by calling measureHeightOfItems and factoring in the viewMetrics.

Run Example
Download Source