2 Replies Latest reply on Jun 29, 2009 8:15 AM by DHL83

    How to create "moveUp" and "moveDown" functionality for items in a TileList

    DHL83

      I want to create "Move Up" and "Move Down" buttons for items in a TileList. They should have the same functionality as if they were dragged and dropped, except only moving one position up or down (and thus switch places with the item above/below). I have tried this using this code for the moveUp button:

       

      private function moveItemUp(){
           var moveFromPos:Number = myTileList.selectedIndex;
           if(myTileList.selectedIndex > 0){
                var moveToPos:Number = myTileList.selectedIndex-1;
                var tempItem:Item = myTileListDataProvider.removeItemAt(moveFromPos);
                myTileListDataProvider.addItemAt(tempItem, moveToPos);
                      trace("New selected Index: "+ moveFromPos - 1);
                      myTileList.selectedIndex = moveFromPos - 1;
                      trace("New selected Index: "+ myTileList.selectedIndex);
           }
      }
      

       

      But my problem is that the selectedIndex of myTileList isn't correctly set. For instance; if I have a list of three items and I move the last item up this is what happens:

      1. Item three (selectedindex is 2) switches places with Item two (So far, so good)

      2. Item two is shown in GUI as selected (has Halo around it - so far, so good)

      3. If i click "MoveUp" again, the same two (item three and two) switces places, instead of the intended item two and one.

       

      The traces tell me that myTileList.selectedIndex variable isn't set correctly as the trace shows this:

      New selected Index: 1

      New selected Index: 2

       

      Any idea on how to solve this problem?

        • 1. Re: How to create "moveUp" and "moveDown" functionality for items in a TileList
          Gregory Lafrance Level 6

          Notice how I am using selectedItem in this code.

           

          myTileList.selectedItem = tempItem;

           

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

           

          <?xml version="1.0"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
            <mx:Script>
              <![CDATA[
                import mx.collections.ArrayCollection;
               
                [Bindable] private var myTileListDataProvider:ArrayCollection = new ArrayCollection([
                  "Meat", "Fish", "Poultry", "Vegetables", "Deserts", "Beverages"
                ]);
               
                private function moveItemUp():void{
                  var moveFromPos:Number = myTileList.selectedIndex;
                  if(myTileList.selectedIndex > 0){
                    var moveToPos:Number = myTileList.selectedIndex-1;
                    var tempItem:String = String(myTileListDataProvider.removeItemAt(moveFromPos));
                    myTileListDataProvider.addItemAt(tempItem, moveToPos);
                    trace("New selected Index: " + (moveFromPos - 1));
                    myTileList.selectedItem = tempItem;
                    trace("New selected Index: " + myTileList.selectedIndex);
                  }
                }
              ]]>
            </mx:Script>
            <mx:TileList id="myTileList" dataProvider="{myTileListDataProvider}"
              width="500" height="500">
              <mx:itemRenderer>
                <mx:Component>
                  <mx:Text width="100"/>
                </mx:Component>
              </mx:itemRenderer>
            </mx:TileList>
            <mx:Button label="Move Up" click="moveItemUp()"/>
          </mx:Application>

          1 person found this helpful
          • 2. Re: How to create "moveUp" and "moveDown" functionality for items in a TileList
            DHL83 Level 1

            I found a partial solution at http://www.ultrashock.com/forums/flex/tilelist-selected-element-removed-124313.html and modified it a bit. The answer was using the callLater() method as in this example:

             

            <?xml version="1.0" encoding="utf-8"?>
            
            <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()" layout="vertical">
              <mx:Script>
              <![CDATA[
                  import mx.events.FlexEvent;
                  import mx.collections.ArrayCollection;
                  var arr:ArrayCollection = new ArrayCollection();
                  var temp:Number;
                  var temp2:String;             
            
                  private function initApp():void{                    
                      arr.addItem("A");
                      arr.addItem("B");
                      arr.addItem("C");
                      arr.addItem("D");
                      arr.addItem("E");
                      arr.addItem("F");
                  }
            
                  public function traceEvent(event:FlexEvent):void{
                      trace(event);
                      trace(mtl.selectedIndex);
                      if(mtl.selectedIndex==-1){
                          callLater(setInd);
                      }
                  }              
            
                  private function setInd():void{
                      trace("Changing selected index..");
                      mtl.selectedIndex = temp;
                  }
            
                  public function removeItem():void{
                        temp = mtl.selectedIndex - 1;
                        temp2 = arr.removeItemAt(mtl.selectedIndex) as String;   
                        arr.addItemAt(temp2,temp);                 
                  }
            
                  public function notifyChange(e:Event):void{
                      trace("CH mtl.selectedIndex:" + mtl.selectedIndex);
                  }
              ]]>
            
              </mx:Script>
            
              <mx:TileList id="mtl" width="100" height="200" dataProvider="{arr}" columnCount="1" change="notifyChange(event)" updateComplete="traceEvent(event)"/>
              <mx:Button id="mbt" label="delete" click="removeItem()"/>
              </mx:WindowedApplication>