Updating view spark.components.List

Question

I am using a List component inside an itemRenderer. The main user interaction involves dragging an item from the List in one renderer and dropping it in another.

My problem: When the data object is updated I want the Lists' height to be modified according to the number of objects in the dataprovider(dp), which is passed to the List from the data object. Now I have tried to invalidate the display of the List, refresh its dp and have tried putting this line assets.length > 0 ? assetList.percentHeight = 100 : assetList.height = 10; in other event handlers, such as dragdrop handlers, collection event handlers for the dp etc. I have also tried refreshing the dp for the List component that is using this renderer. The view does eventually get updated but only if I resize the list, or use the scroller or when I begin dragging a new List item but never after the drop.

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" 
                autoDrawBackground="true" width="100%" creationComplete="init()" currentState="collapsed">

    <fx:Script>
        <![CDATA[

            [Bindable] private var itemRenderer:ClassFactory;
            [Bindable] private var colWidth:Number = 100;
            [Bindable] private var assets:ArrayCollection = new ArrayCollection;;

            public function init():void{

                itemRenderer = new ClassFactory(DefaultRenderer);

                   this.addEventListener(FlexEvent.DATA_CHANGE, onDataChange);

            }

            private function onDataChange(e:FlexEvent):void {
                assets = data.assets;
                trace(data.name, assets.length);
                assets.length > 0 ? assetList.percentHeight = 100 : assetList.height = 10;
            }               

        ]]>
    </fx:Script>

    <s:Group width="100%">
        <s:layout>
            <s:VerticalLayout gap="0" />
        </s:layout>

        <s:ToggleButton 
            id="viewToggle" 
            label="{data.name}" 
            width="100%" 
            height="50" 
            />

        <s:List id="assetList"
                width="100%"
                dataProvider="{assets}"
                height = "10"
                top="0" left="0" bottom="0" right="0"
                dragEnabled="true"
                allowMultipleSelection="true"
                dragMoveEnabled="true"
                dropEnabled="true"
                itemRenderer="{itemRenderer}"

                >
            <s:layout>
                <s:TileLayout requestedColumnCount="2"
                              horizontalGap="0" verticalGap="0"
                              columnWidth="{colWidth}" rowHeight="{colWidth}"/>
            </s:layout>
        </s:List>
    </s:Group>
</s:ItemRenderer>

Answer 1

In your onDataChange method try this:

itemRenderer = null;
itemRenderer = new ClassFactory(DefaultRenderer);