Dynamic Spark DropDownList ItemRenderer within Flex Datagrid

Question

I have a datagrid which contains a Spark dropdownlist that needs to obtain dynamic data. The datagrid uses a separate dataProvider.

When I use a static ArrayCollection within my ItemRenderer, it works (please see listing 1).

However, when I use Swiz to mediate a 'list complete' event to load the ArrayCollection, the dropdownlist does not show the new data (please see listing 2).

Using the debugger, I inspected the dropdownlist ItemRenderer and have confirmed the new data is being loaded into the ArrayCollection. The new data is not shown in the UI control. I have tried invalidateProperties() + validateNow() and dispatching events on both the control and the renderer (this), but nothing seems to make the new data appear in the control on the datagrid.

Please help !!!

Listing 1: Datagrid and static ArrayCollection (this works):

<mx:DataGrid x="10" y="25" width="98%" id="dgInventory" paddingLeft="25" paddingRight="25" paddingTop="25" paddingBottom="25" 
                     editable="true"
                     itemClick="dgInventory_itemClickHandler(event)" dataProvider="{acInventory}"
                     creationComplete="dgInventory_creationCompleteHandler(event)"
                     height="580">
            <mx:columns>
                <mx:DataGridColumn headerText="Item" dataField="itemName" itemRenderer="components.ItemRendererItem"
                                   rendererIsEditor="true" editorDataField="selection" editable="true"/>
                <mx:DataGridColumn headerText="Quantity Required" dataField="quantityReq" itemRenderer="components.ItemRendererQuantityRequired"
                                   rendererIsEditor="true" editorDataField="selection" editable="true"/>
            </mx:columns>
</mx:DataGrid>

<fx:Script>
    <![CDATA[       

        import mx.collections.ArrayCollection;
        import spark.events.IndexChangeEvent;

        public var selection:int;

        [Bindable]
        protected var acItem:ArrayCollection = new ArrayCollection(
            [   { itemName: "Item1"},
                { itemName: "Item2"},
                { itemName: "Item3"},
            ]);
    //
        protected function dropdownlist1_changeHandler(e:IndexChangeEvent):void
        {
            selection = e.newIndex;
        }

    ]]>
</fx:Script>

<s:DropDownList id="ddlItem" prompt="Select Item" dataProvider="{acItem}" labelField="itemName"
                selectedIndex="{int(dataGridListData.label)}"
                change="dropdownlist1_changeHandler(event)"
                width="80%" top="5" bottom="5" left="5" right="5"/>

Listing 2: Dynamic ArrayCollection (does not work):

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                          xmlns:s="library://ns.adobe.com/flex/spark" 
                          xmlns:mx="library://ns.adobe.com/flex/mx" 
                          focusEnabled="true">

    <fx:Script>
        <![CDATA[       
            import event.ItemEvent;

            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;

            import spark.events.IndexChangeEvent;

            public var selection:int;
        //
            [Bindable]
            protected var acItem:ArrayCollection = new ArrayCollection();
        //
            protected function dropdownlist1_changeHandler(e:IndexChangeEvent):void
            {
                selection = e.newIndex;
            }
        //
            protected function ddlItem_creationCompleteHandler(event:FlexEvent):void
            {
                var eve : ItemEvent = new ItemEvent( ItemEvent.LIST_ITEM_REQUESTED );
                dispatchEvent( eve );
            }
        //
            [Mediate( event="ItemEvent.LIST_ITEM_COMPLETE", properties="acItem" )]
            public function refreshness( _acItem : ArrayCollection ):void
            {
                acItem.removeAll();

                var len:int = _acItem.length;

                if (len > 0)
                {
                    for (var i:int=0; i < len; i++)
                    {
                        var newItem:Object = new Object;
                        newItem["itemName"] = _acItem[i].itemName;
                        acItem.addItem(newItem);
                    }
                }
                this.invalidateProperties();
                this.validateNow();
                //dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
            }

        ]]>
    </fx:Script>

    <s:DropDownList id="ddlItem" prompt="Select Item" dataProvider="{acItem}" labelField="itemName"
                    selectedIndex="{int(dataGridListData.label)}"
                    creationComplete="ddlItem_creationCompleteHandler(event)"
                    change="dropdownlist1_changeHandler(event)"
                    width="80%" top="5" bottom="5" left="5" right="5"/>
</s:MXDataGridItemRenderer>

Answer 1

After re-reading Peter Ent's ItemRenderer series, this turned out to be quite simple.

I extended DataGrid to have the ArrayCollection property I needed, then added this to my renderer:

[Bindable]
            protected var acItem:ArrayCollection = new ArrayCollection();
        //
            override public function set data( value:Object ) : void
            {
                super.data = value;
                acItem = (listData.owner as MyDataGrid).itemList; // get the data from the renderer's container (by extending it to add a property, if necessary)
            }