1 Reply Latest reply on Oct 29, 2010 12:04 AM by WebTrauma

    DropDownList ItemRenderer within Flex Datagrid Not Refreshing

    WebTrauma Level 1

      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>
        • 1. Re: DropDownList ItemRenderer within Flex Datagrid Not Refreshing
          WebTrauma Level 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)
                      }