How to add an icon to an AdvancedDataGrid column header and keep word wrap feature for the text

Question

As stated, I'm trying to obtain column headers consisting of an icon and wrappable text in a flex AdvancedDataGrid.

(EDIT: I forgot to mention an important part of the context: the columns are added dynamically, in actionscript. This apparently changes the behavior.)

I've tried using a custom mxml headerRenderer, like so:

<mx:headerRenderer>
    <fx:Component>
        <mx:HBox width="100%"
                 height="100%"
                 verticalAlign="middle">
            <mx:Image source="<image_url>"
                      width="10%"
                      height="100%"/>
            <mx:Text text="{data.headerText}"
                     width="90%"
                     height="100%"/>
        </mx:HBox>
    </fx:Component>
</mx:headerRenderer>

but for some reason, the text here is truncated instead of wrapped (it works outside of a renderer).

I've also tried creating a subclass of AdvancedDataGridHeaderRenderer and overriding createChildren to add the icon:

override protected function createChildren():void
{
    var icon:Image = new Image();
    icon.source = <image_url>;
    icon.width = 16;
    icon.height = 16;
    addChild(icon);

    super.createChildren();
}

but then, the icon and the text get superimposed.

I'm out of ideas on this. Anyone else?

Answer 1

It worked for me when I removed the height="100%" attribute from mx:Text in your headerRenderer.

UPDATE: it only works like this when I manually stretch the AdvancedDataGrid component. I'll look into how to make it work unconditionally.

When the height of the Text component was set to 100%, it was constrained to its parent HBox's height. Therefore when a word was wrapped and moved to the next line, it wasn't visible because the height of the Text component didn't allow for it to be visible.

If you remove this constraint, Text component's height will be determined dynamically based on its contents, as will headerRenderer's. Also add minHeight to your Text so that it is visible when it's loaded.

Here's the code (I also removed scrollbars because they were showing during resize):

<mx:headerRenderer>
    <fx:Component>
        <mx:HBox width="100%"
                 height="100%"
                 verticalAlign="middle"
                 horizontalScrollPolicy="off"
                 verticalScrollPolicy="off">
            <mx:Image source="<image_url>"
                      width="10%"
                      height="100%"/>
            <mx:Text text="{data.headerText}"
                     width="90%"
                     minHeight="20"/>
        </mx:HBox>
    </fx:Component>
</mx:headerRenderer>

Answer 2

In case anyone is interested in how to do this with dynamically created columns, a combination of Hunternif's code for the renderer and some added code on column creation worked for me:

The columns need to have fixed widths and need to be invalidated to inform the AdvancedDataGrid that it needs to rerender:

var cols:Array = [];

for each (...) {
    var column:AdvancedDataGridColumn = new AdvancedDataGridColumn();
    ...

    // Fix the width of created columns
    column.width = 150;

    cols.push(column);
}

grid.columns = cols;

// Invalidate columns so that sizes are recalculated
grid.mx_internal::columnsInvalid = true;

// Take changes into account
grid.validateNow();