Height problem with automatic word wrapping in MXTreeItemRenderer in a flex tree

Question

With the default TreeItemrenderer it is possible to enable automatic word wrapping depending on the tree width by setting wordWrap=true and variableRowHeight="true" in the tree control.

I would like to enable this behavior in a MXTreeItemRenderer (a wrapper for using spark components as mx itemrenderer). I used the MXTreeItemRenderer created by Flexbuilder and added a width of 100% to the label component (see code below).

Word wrapping is working now but in many cases the calculation of the item renderer height is wrong when there are line breaks. It seems to work with a fixed width.

Any idea how to get this right?

<s:MXTreeItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                      xmlns:s="library://ns.adobe.com/flex/spark" 
                      xmlns:mx="library://ns.adobe.com/flex/mx">

    <s:states>
        <s:State name="normal" />            
        <s:State name="hovered" />
        <s:State name="selected" />
    </s:states>
    <s:HGroup left="0" right="0" top="0" bottom="0" verticalAlign="middle">
        <s:Rect id="indentationSpacer" width="{treeListData.indent}" percentHeight="100" alpha="0">
            <s:fill>
                <s:SolidColor color="0xFFFFFF" />
            </s:fill>
        </s:Rect>
        <s:Group id="disclosureGroup">
            <s:BitmapImage source="{treeListData.disclosureIcon}" visible="{treeListData.hasChildren}" />
        </s:Group>
        <s:BitmapImage source="{treeListData.icon}" />
        <s:Label id="labelField" text="{treeListData.label}" paddingTop="2" width="100%"/>
    </s:HGroup>
</s:MXTreeItemRenderer>

Answer 1

Well you should probably file a bug first off ;)

If it's not reporting the height correctly, override the measure(..) method and work out the height yourself, you'll probably have to use line metrics (If they are still around in Spark) to work it out.

Answer 2

I found out that the height is calculated correctly when it is done twice. So as a workaround for now I listen to changes of the data and the size and call the invalidateList() Method of the tree on a change.

Answer 3

In this blog site, someone pointed me to this site

really nice one, it helped me. I think it works for varying row height. Nodes with wrapping text should work.

Enjoy!