Search code examples
apache-flexactionscriptflex4adobeflash-builder

Flex: Force redraw of the DataGrid when text changes in custom itemrenderers


Hope someone can help me here. I have a DataGrid that is using custom itemrenderers. Everything works fine except of one type of itemrenderers where a multiline text is set at a later point (it is coming from a database depending on some conditions). In this case, the text is going multiline as it should but the height of the row is not increasing, so the text overlaps the next row.

If i resize the column, the rows are resized to the correct size (since the text is already there and the label have correct height). Also if i scroll down it looks fine.

So how can i force to resize the row to the correct new height after the text was set ?

I have tried pretty much everything - validateNow() on the itemrenderer and the datagrid after i get a new label height and whatnot.

I know a good way would be to do the sql queries before passing the data to the datagrid but it is a dynamic metadata block and is rather complex. There must be a way to just re-render the DataGrid ?

It worked well with earlier SDK versions but does not with my new setup (Flex SDK 4.13 + AIR 14)

Here is the code for the DataGrid:

<s:DataGrid id="dG"
                  variableRowHeight="true"
                  creationComplete="dgCreation()"
                  width="100%"
                  height="100%"
                  dataProvider="{theDataProvider}"
                  doubleClickEnabled="true"
                  initialize="dG.grid.rowBackground = dG.alternatingRowColorsBackground"
                  selectionChanging="dG_selectionChangingHandler(event)">

    <SMT:columns>
        <s:ArrayList>
        </s:ArrayList>
    </SMT:columns>

</s:DataGrid>

And the itemRenderer:

<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                textAlign="left">
<fx:Script>
    <![CDATA[

        override public function set label(value:String):void
        {

            // do the sql lookup here

        }

        //responder from async dbCall
        public function onLookupComplete(result:SQLResult):void
        {               
                myContent.text = resultString;
        }

    ]]>
</fx:Script>

<s:Label id="myContent"
         left="5"
         top="9"
         text=""
         maxDisplayedLines="5"
         lineBreak="toFit"
         verticalAlign="top"
         width="100%"/>
</s:GridItemRenderer>

Thank you very much for your time !


Solution

  • Well, turned out to be much easier than I thought. I have tried the validateDisplayList() but needed the invalidateDisplayList() on the DataGrid (it does some stuff in there).

    Code for the itemrenderer:

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight);
    
        // force the grid to re-render again
        column.grid.invalidateDisplayList();
    }