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

11 Responses to MX DataGrid, List and VariableRowHeight

  1. DevSachin says:

    not able to run demo:
    Error is:
    ReferenceError: Error #1065: Variable is not defined.
    at spark.components.supportClasses::GroupBase/addEventListener()
    at mx.core::UIComponent()
    at spark.components.supportClasses::GroupBase()
    at spark.components::Group()
    at spark.components.supportClasses::Skin()
    at spark.skins::SparkSkin()
    at mx.skins.spark::SparkSkinForHalo()
    at mx.skins.spark::BorderSkin()
    at mx.skins.spark::ContainerBorderSkin()
    at mx.core::Container/createBorder()
    at mx.core::Container/styleChanged()
    at mx.core::Application/styleChanged()
    at mx.managers.systemClasses::ChildManager/addingChild()
    at mx.managers.systemClasses::ChildManager/initializeTopLevelWindow()
    at mx.managers::SystemManager/initializeTopLevelWindow()
    at mx.managers::SystemManager/
    at mx.managers::SystemManager/
    at mx.preloaders::Preloader/timerHandler()
    at flash.utils::Timer/_timerDispatch()
    at flash.utils::Timer/tick()

    • Alex Harui says:

      Try again. I just uploaded a version on an older SDK. The original was on the Hero builds.

  2. Romey romeeeee says:

    Say bruh! all your shit go HARRRDDDDDDD!!! Thank you very much for all your assistance for real. yooooo, all u gotta do is change the F in flex harui and u got ur name hahhahahahah!

    By the way, Flex 4.5 is POPPINNNNNNNN!!! I had a nasty bug wit the scrollers and shit while i was resizing. fail bruh.

    Im workin wit on a project using Birdeye Ravis for graphs man and its so hard.


  3. qplayz says:

    I have the same Error 🙁

  4. Cheng Wei says:

    Hi Alex,

    Good to see your talking on this topic. I have applied with your method, but it still has problems. I made a simple example to demonstrate the problem. Could you please help me? send me your email?

  5. Hemden says:

    Thanks. Adobe Flex Forum heps a lot…
    Many regards from Germany

  6. cloo says:

    cool, how about two Texts, one’s width depends another.

  7. Vincent says:

    Thanks for this. It solves my variableRowHeight issue but it adds blank rows in the PrintDataGrid.
    Any idea ?