2 Replies Latest reply on Sep 29, 2010 12:10 AM by Rajiv Jha

    Issue : drag and drop from list control to tree control

    Rajiv Jha

      Hi,

       

      I was trying a drag and drop from list control to tree control. I have used some sample data to populate list and tree controls .


      It is working fine . except one problem ..

      Prob : when i drag an item to tree control .. it gets added .. now tree contains (X+1) data in list .. say X is the inital number of nodes in a tree node.

                now if i drag another item from list to last item in the tree node  .. i.e at X+1 index. .. it throws null pointer exception.

      I am considerably new in flex programming . looking for help from experts ..

       

      Below is my code :

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                      layout="horizontal"
                      creationComplete="init()">
          <mx:Script>
              <![CDATA[
                  import mx.controls.listClasses.IListItemRenderer;
                  import mx.rpc.events.FaultEvent;
                  import mx.rpc.events.ResultEvent;
                  import mx.utils.ObjectUtil;
                  import mx.collections.ICollectionView;
                  import mx.core.UIComponent;
                  import mx.managers.DragManager;
                  import mx.events.DragEvent;
                  import mx.controls.Alert;
                  import mx.controls.Label;
                  import mx.events.CloseEvent;

       

                  private var homePath:String="/home/e311394/dndTest/";
                  private var destPath:String="/home/e311394/dndDest/";
                  private var eid:String="e311394";
                  private var actn:String;

       


                  [Bindable]
                  private var cm:ContextMenu;
                  private var cmi:ContextMenuItem;
                  [Bindable]
                  private var dp:ArrayCollection;

       


                  private function init():void
                  {
                      cmi=new ContextMenuItem("Remove");
                      cmi.enabled=true;
                      cmi.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_menuItemSelect);

       

                      cm=new ContextMenu();
                      cm.hideBuiltInItems();
                      cm.customItems=[cmi];
                      cm.addEventListener(ContextMenuEvent.MENU_SELECT, contextMenuItem_menuSelect);
                      list.contextMenu=cm;
                  }

       

                  private function contextMenuItem_menuSelect(evt:ContextMenuEvent):void
                  {
                      list.selectedIndex=lastRollOverIndex;
                  }

       

                  private function contextMenuItem_menuItemSelect(evt:ContextMenuEvent):void
                  {
                      var loclSelectedRow:Object=list.selectedItem;
                      var lostrSelectedMenuItem:String;
                      lostrSelectedMenuItem=evt.target.caption;

       

       

       

                      if (loclSelectedRow != null)
                      {
                          var obj:Object=new Object()
                          obj.label=loclSelectedRow.label as String;
                              //Alert.show(obj.label);
                      }

       

                      if (lostrSelectedMenuItem == "Remove")
                      {
                          if(loclSelectedRow!=null)
                          {
                          var pth:String=homePath.concat(loclSelectedRow.label);
                          //Alert.show(pth);
                          //FlexDnDRemoteService.process(eid,"delete",pth,"-"); 

       

                          var coll:ArrayCollection=list.dataProvider as ArrayCollection;

       

                          if (coll.contains(loclSelectedRow))
                          {
                              coll.removeItemAt(coll.getItemIndex(loclSelectedRow));
                          }
                          }
                      }

       

                  }

       

       

       

                  public function onTreeDragEnter(event:DragEvent):void
                  {
                      event.preventDefault();
                      DragManager.acceptDragDrop(event.target as UIComponent);
                      tree.showDropFeedback(event);
                  }

       

                  protected function onTreeDragOver(event:DragEvent):void
                  {
                      event.preventDefault();
                      event.currentTarget.hideDropFeedback(event);

       

                      try
                      {
                          var index:int=tree.calculateDropIndex(event);
                      }
                      catch (e:Error)
                      {
                          DragManager.showFeedback(DragManager.NONE);
                          return;
                      }

       

                      tree.selectedIndex=index;
                      var draggedOverItem:Object=tree.selectedItem;
                  }

       


                  public function onTreeDragExit(event:DragEvent):void
                  {
                      event.preventDefault();
                      tree.hideDropFeedback(event);
                  }

       

                  private function showAlert():void
                  {
                      Alert.yesLabel="Move";
                      Alert.noLabel="Copy";
                      Alert.buttonWidth=70;

       

                      Alert.show("Copy / Move ?", "Confirm", Alert.YES | Alert.NO | Alert.CANCEL, this, alertListener, null, Alert.OK);
                  }

       

                  private function alertListener(eventObj:CloseEvent):void
                  {
                      var result:Boolean=false;

       

                      if (eventObj.detail == Alert.CANCEL)
                      {
                          //Alert.show("CANCEL");
                          return;
                      }

       

                      if (eventObj.detail == Alert.YES)
                      {
                          //Alert.show("YES");
                          result=true;

       

                      }
                      else if (eventObj.detail == Alert.NO)
                      {
                          //Alert.show("NO");
                          result=false;
                      }

       

                      var index:int=tree.calculateDropIndex(treedropevt);
                      //Alert.show("Drop Pos" + index.toString());

       

                      /* var treeList:ArrayCollection=tree.dataProvider as ArrayCollection;
                         Alert.show(" index"+index+"Length "+treeList.length);

       

                         if(index > treeList.length)
                         {
                         Alert.show("Returning");
                         return;
                       } */

       

                      var items:Array=new Array();

       

                      if (treedropevt.dragSource.hasFormat("items"))

       

                          items=items.concat(treedropevt.dragSource.dataForFormat("items") as Array);

       

                      var parentItem:Object;

       

                      parentItem=getObjectTarget();
                      /* if (tree.dataDescriptor.isBranch(tree.indexToItemRenderer(index).data))
                         {
                         parentItem=tree.indexToItemRenderer(index).data;
                         }
                         else
                         {
                         var dropParentPackage:Object = tree.mx_internal::_dropData.parent as Object;
                         Alert.show("HAck"+dropParentPackage.toString());
                         parentItem=tree.getParentItem(tree.indexToItemRenderer(index).data);
                         //Alert.show("Lenght "+ObjectUtil.getClassInfo(parentItem).properties.length);
                       } */
                      //Alert.show("Lenght "+ObjectUtil.getClassInfo(parentItem).properties.length);
                      var position:int=0;
                      /* if(ObjectUtil.getClassInfo(parentItem).properties.length==0)
                         {
                         Alert.show("Returning");
                         return;
                       }*/

       

                      if (parentItem != null)
                      {

       

                          try
                          {
                              while (tree.indexToItemRenderer(index).data != parentItem)
                              {

       


                                  //Alert.show(tree.indexToItemRenderer(index).data.toString());
                                  if (index > 0)
                                      index--;
                                  //Alert.show("Insiade");
                                  position++;
                              }
                          }
                          catch (e:Error)
                          {
                              Alert.show("Catch" + index.toString());
                              return;
                          }

       

                      }

       

                      for each (var item:Object in items)
                      {
                          var obj:Object=new Object()
                          obj.label=item.label as String;

       

       

       

                          if (parentItem != null)
                          {
                              //Alert.show("ADDED");                       
                              tree.dataDescriptor.addChildAt(parentItem, obj, position++);                       
                          }
                          else
                          {
                              //Alert.show("PARENT NULL");
                              tree.dataDescriptor.addChildAt(tree.selectedItem, obj, position++);                       
                          }
                         
                          var spth:String=homePath.concat(item.label);
                          //Alert.show(spth);   
                          var dpth:String=destPath.concat(item.label);
                          //Alert.show(dpth);

       

                          if (result == true)
                          {
                              removeItems();
                                  //FlexDnDRemoteService.process(eid,"move",spth,dpth);

       

                          }
                          else
                          {
                              //FlexDnDRemoteService.process(eid,"copy",spth,dpth);

       

                          }
                          tree.validateNow();
                      }

       


                  }

       

                  public function getObjectTarget():Object
                  {
                      var dropData:Object=tree.mx_internal::_dropData as Object;
                      if (dropData.parent != null)
                      {
                          return dropData.parent;
                      }
                      else
                      {
                          // if there is not parent (root of the tree), I take the root directly
                          var renderer:IListItemRenderer=tree.indexToItemRenderer(0);
                          return renderer.data;
                      }
                  }

       

                  public function removeItems():void
                  {
                      //remove moved elements
                      var items:Array=treedropevt.dragSource.dataForFormat("items") as Array;
                      var coll:ArrayCollection=list.dataProvider as ArrayCollection;
                      for each (var item:Object in items)
                      {
                          if (coll.contains(item))
                          {
                              coll.removeItemAt(coll.getItemIndex(item));
                          }
                      }
                  }

       

                  private var treedropevt:DragEvent;

       

                  public function onTreeDragDrop(event:DragEvent):void
                  {
                      treedropevt=event;
                      showAlert();
                      event.preventDefault();
                      tree.hideDropFeedback(event);
                  }

       

                  public function resultHandler(event:ResultEvent):void
                  {
                      Alert.show("Success", "Status");
                  }

       

                  public function faultHandler(event:FaultEvent):void
                  {
                      Alert.show(event.fault.faultString, "Failure");
                  }
              ]]>
          </mx:Script>

       


          <mx:ArrayCollection id="listDP">
              <mx:Object label="File1.dnd"/>
              <mx:Object label="File2.dnd"/>
              <mx:Object label="File3.dnd"/>
              <mx:Object label="File4.dnd"/>
              <mx:Object label="File5.dnd"/>
          </mx:ArrayCollection>
          <mx:Number id="lastRollOverIndex"/>

       

          <!--
               <mx:ArrayCollection id="treeDP">
               <mx:Object label="/home">
               <mx:children>
               <mx:Object label="dummy1.ks"/>
               <mx:Object label="dummy2.ks"/>
               <mx:Object label="e493126">
               <mx:children>
               <mx:ArrayCollection>
               <mx:Object label="/home/e493126/sample1.ks"/>
               </mx:ArrayCollection>
               </mx:children>
               </mx:Object>
               </mx:children>
               </mx:Object>
               </mx:ArrayCollection>
          -->

       

          <mx:ArrayCollection id="treeDP">
              <mx:Object label="/dndDest">
                  <mx:children>
                      <mx:ArrayCollection>
                          <mx:Object label="sample1.ks"/>
                          <mx:Object label="sample2.ks"/>
                          <mx:Object label="sample3.ks"/>
                          <mx:Object label="sample4.ks"/>
                          <mx:Object label="sample5.ks"/>
                          <mx:Object label="sample6.ks"/>
                      </mx:ArrayCollection>
                  </mx:children>
              </mx:Object>
          </mx:ArrayCollection>

       

          <mx:List id="list"
                   itemRollOver="lastRollOverIndex = event.rowIndex"
                   width="50%"
                   dragEnabled="true"
                   dataProvider="{listDP}"
                   labelField="label"
                   allowMultipleSelection="true"
                   dragMoveEnabled="false">

       

          </mx:List>

       

          <mx:Tree id="tree"
                   width="50%"            
                   dragEnabled="true"            
                   dataProvider="{treeDP}"            
                   dragEnter="onTreeDragEnter(event)"
                   dragOver="onTreeDragOver(event)"
                   dragExit="onTreeDragExit(event)"
                   dragDrop="onTreeDragDrop(event)"
                   labelField="label"
                   liveScrolling="true">
          </mx:Tree>

       

          <mx:RemoteObject id="FlexDnDRemoteService"
                           showBusyCursor="true"
                           destination="FlexDnD">
              <mx:method name="process"
                         result="resultHandler(event)"
                         fault="faultHandler(event)"/>
          </mx:RemoteObject>

       

      </mx:Application>

       

       

       

       

       

       

      Thanks,

       

      Rajiv