Question

To display HTML formatted text in an AdvancedDataColumn, I’m using a custom renderer which is an mx:Text object. I’m setting myText.htmlText to something like “test text which is really a lot longer than the column width”. No matter what properties I set though, the text just runs off the end of the column.

I tried wordWrap=”true” on the dataGrid and also on each individual column. I also tried messing with css and tried applying it to the text field, but nothing seems to show up. Has anyone been able to wrap htmlText in a text object?

Also, but slightly less important, there are extra blank lines after each tag which I would like to get rid of.

–Edit–added renderer code.

<?xml version="1.0"?>
<!-- itemrenderers/sparkmx/myComponents/SummaryRenderer.mxml -->
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark"
    textAlign="center">

    <fx:Script>
        <![CDATA[
            import mx.controls.advancedDataGridClasses.AdvancedDataGridListData;

            override public function set data(value:Object):void
            {
                // help for style sheets
                //http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/text/StyleSheet.html

                //create and initialize css
                var myCSS:StyleSheet = new StyleSheet();
                myCSS.setStyle("p", {textAlign:'left'});
                // TODO try wordwrap here.
                myCSS.setStyle("div", {textAlign:'left'});

                //ensure html support and apply css to it
                myText.styleSheet = myCSS;

                // if the value is null, it would throw an error.
                if (AdvancedDataGridListData(listData) != null) {
                    myText.htmlText = value[AdvancedDataGridListData(listData).dataField];
                }
            }
        ]]>
    </fx:Script>

    <mx:Text id="myText"/>
</s:MXAdvancedDataGridItemRenderer>

Answer 1

I figured out the first part. It looks like the Text object inside the cell was larger than the cell, so even though it was “wrapping” the text, it thought it had plenty of room.

Adding in a

myText.percentWidth=100;
myText.percentHeight=100;

to the set data function solved that problem.