3 Replies Latest reply on Dec 10, 2009 12:30 PM by mmmnow

    combobox in tilelist itemrenderer

    mmmnow

      Hello,

      I have following problem:

       

      when I create tilelist with item renderer which cotains combobox and select some value from that combobox then when I scroll tilelist to another item and return to the previous then selected combobox value is missed. I can undersand this because when I scroll the list item, renderer for object which I modified is deleted and selected value isn't stored anywhere. So I can create variable to store selected value but i don't know when to restore it. I tried several events but none of them was fired only when object appeared in the tilelist.

       

      I attached very simle piece of code which demostrates the problem.

       

      Regards

       

      Michał Nowotka

        • 1. Re: combobox in tilelist itemrenderer
          mmmnow Level 1

          Can somebody help me? Hello?

          • 2. Re: combobox in tilelist itemrenderer
            Gregory Lafrance Level 6

            If this post answers your question or helps, please mark it as such.


            Greg Lafrance
            www.ChikaraDev.com

            Flex Development and Support Services

            This code should get you started:

             

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
              <mx:TileList id="tileList" dataProvider="{tileListAC}" 
                alternatingItemColors="[0xEDB4B4, 0xC4C4E8]"
                columnWidth="200" rowHeight="200">
                <mx:itemRenderer>
                  <mx:Component>
                    <mx:VBox>
                      <mx:Label text="Item: {data.item}"/>
                      <mx:ComboBox prompt="make selection" 
                        dataProvider="{outerDocument.comboAC}"
                        change="outerDocument.updateItem(event);"/>          
                    </mx:VBox>
                  </mx:Component>
                </mx:itemRenderer>
              </mx:TileList>
              <mx:Script>
                <![CDATA[
                  import mx.events.ListEvent;
                  import mx.collections.ArrayCollection;
                  
                  [Bindable] public var comboAC:ArrayCollection = 
                    new ArrayCollection(["one", "two", "three"]);
                  [Bindable] private var tileListAC:ArrayCollection = 
                    new ArrayCollection([
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}, 
                    {item: "not selected"}, {item: "not selected"}
                  ]);
                  
                  public function updateItem(evt:ListEvent):void{
                    var obj:Object = tileListAC.getItemAt(tileList.selectedIndex);
                    obj.item = evt.target.selectedItem;
                    tileListAC.setItemAt(obj, tileList.selectedIndex);
                  }
                ]]>
              </mx:Script>
            </mx:Application>
            
            • 3. Re: combobox in tilelist itemrenderer
              mmmnow Level 1

              No, this don't work properly. Look, I modified your example a bit:

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
                <mx:TileList id="tileList" dataProvider="{tileListAC}" 
                  alternatingItemColors="[0xEDB4B4, 0xC4C4E8]"
                  columnWidth="200" rowHeight="200" rowCount="1" columnCount="2" direction="vertical">
                  <mx:itemRenderer>
                    <mx:Component>
                      <mx:VBox>
                        <mx:Label text="Item: {data.item}"/>
                        <mx:ComboBox prompt="make selection" 
                          dataProvider="{outerDocument.comboAC}"
                          change="outerDocument.updateItem(event);"/>          
                      </mx:VBox>
                    </mx:Component>
                  </mx:itemRenderer>
                </mx:TileList>
                <mx:Script>
                  <![CDATA[
                    import mx.events.ListEvent;
                    import mx.collections.ArrayCollection;
                    
                    [Bindable] public var comboAC:ArrayCollection = 
                      new ArrayCollection(["one", "two", "three"]);
                    [Bindable] private var tileListAC:ArrayCollection = 
                      new ArrayCollection([
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}, 
                      {item: "not selected"}, {item: "not selected"}
                    ]);
                    
                    public function updateItem(evt:ListEvent):void{
                      var obj:Object = tileListAC.getItemAt(tileList.selectedIndex);
                      obj.item = evt.target.selectedItem;
                      tileListAC.setItemAt(obj, tileList.selectedIndex);
                    }
                  ]]>
                </mx:Script>
              </mx:Application>
              

               

              Now - when I modify first combo, then third, fifth seventh.. ect. become modified exactly the same way. I want all combos be independent of each other...