5 Replies Latest reply on Jul 14, 2007 9:01 PM by Craig Grummitt

    Problem adding nodes to a Tree

    Craig Grummitt Level 3
      i'm sure this'll be an easy one for someone...

      all i want to do is add a node to an XMLListCollection which is bound to a Tree.

      To replicate the problem i have with my current code(below), do the following:
      1. Open all branches off the tree.
      2. Click on the button.
      3. Notice branches Folder2 and Folder3 appear twice. (!!!!!!)
      4. Try to open a folder.
      5. Notice the duplicated branches disappear, and everything returns to expected behaviour.

      What's going on?!
      In anticipation, thanks for your help
      Cheers,
      Craig

      <?xml version="1.0"?><mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">
      <mx:Tree id="tree1" labelField="@label" showRoot="true" width="200" height="300">
      <mx:XMLListCollection id="MailBox">
      <mx:XMLList>
      <folder label="Folder1" isBranch="true"/>
      <folder label="Folder2" isBranch="true"/>
      <folder label="Folder3" isBranch="true">
      <folder label="Paper1" isBranch="false"/>
      <folder label="Paper2" isBranch="false"/>
      </folder>
      <folder label="Folder4" isBranch="true">
      <folder label="Paper1" isBranch="false"/>
      <folder label="Paper2" isBranch="false"/>
      </folder>
      <folder label="Folder5" isBranch="true"/>
      </mx:XMLList>
      </mx:XMLListCollection>
      </mx:Tree>
      <mx:Button label="Add an item to Folder3" click="whatnow()"/>
      <mx:Script>
      <![CDATA[
      private function whatnow():void {
      var myXML:XMLList=tree1.dataProvider.source;
      var addThis:XML=new XML("<folder label=\"Personal\" isBranch=\"false\" /> ");
      myXML[2].appendChild(addThis);
      }
      ]]>
      </mx:Script>
      </mx:Application>
        • 1. Re: Problem adding nodes to a Tree
          rotoole Level 1
          i actually have run into this problem before. the workaround for this would be:

          1. to not have the dp bound to the tree
          2. set the dataProvider of the tree and set a var to the original dp on the creationComplete of the app.
          3. save a var to the open items of the tree
          4. append the new node
          5. set the dp to the new xmllist
          6. open the folder nodes that were previously open so noone will know the difference :)

          hope this helps....1/2 the fun of flex is finding these workarounds

          <?xml version="1.0"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">
          <mx:Tree id="tree1" labelField="@label" showRoot="true" width="200" height="300" creationComplete="ini()">
          </mx:Tree>
          <mx:XMLListCollection id="MailBox">
          <mx:XMLList>
          <folder label="Folder1" isBranch="true"/>
          <folder label="Folder2" isBranch="true"/>
          <folder label="Folder3" isBranch="true">
          <folder label="Paper1" isBranch="false"/>
          <folder label="Paper2" isBranch="false"/>
          </folder>
          <folder label="Folder4" isBranch="true">
          <folder label="Paper1" isBranch="false"/>
          <folder label="Paper2" isBranch="false"/>
          </folder>
          <folder label="Folder5" isBranch="true"/>
          </mx:XMLList>
          </mx:XMLListCollection>

          <mx:Button label="Add an item to Folder3" click="whatnow()" x="10" y="308"/>
          <mx:Script>
          <![CDATA[
          import mx.controls.Alert;
          [Bindable]
          public var myXML:XMLList;

          private function whatnow():void {
          var sels:* = tree1.openItems;
          var addThis:XMLList=new XMLList("<folder label=\"Personal\" isBranch=\"false\" /> ");
          myXML[2].appendChild(addThis);
          tree1.dataProvider = myXML;
          tree1.openItems = sels;

          }

          public function ini():void
          {
          myXML = new XMLList(MailBox);
          tree1.dataProvider = myXML;
          }
          ]]>
          </mx:Script>

          </mx:Application>
          • 2. Re: Problem adding nodes to a Tree
            Craig Grummitt Level 3
            fantastic thanks for the tip rob. sounds a little like a limitation of the tree though wouldn't you agree that it struggles to update the display with its binding?

            and hmmm... i don't know if i agree with 'fun of flex' comment! or was that sarcasm? ;)

            thanks again
            craig
            • 3. Re: Problem adding nodes to a Tree
              ntsiii Level 3
              IMHO, the Tree is one of the weakest of the flex components. I hope it is improved in 3.0.

              Tracy
              • 4. Problem adding nodes to a Tree
                Craig Grummitt Level 3
                it's good to hear that - i've spent so long trying to customise the tree for different clients/issues constantly thinking to myself there has to be easier ways to do this!

                apologies for prolonging a post, but two additional problems i'm encountering with Tree:

                i've customised a tree with custom actions on dragDrop and dragComplete. it was necessary to call event.preventDefault to prevent the default movements, however preventing default means that it doesn't clean up the caret indicating the row, and i can't work out a way of removing the caret.

                Also - when i call Tree.calculateDropIndex() (which took some hunting to find btw!) it gives no indication where abouts the caret is - i.e. is it on top of, before or after that index? when i perform custom calculations in regards to moving an item, i have limited information as to where to place it.

                hope these descriptions of problems make sense.
                regards,
                craig
                • 5. Re: Problem adding nodes to a Tree
                  Craig Grummitt Level 3
                  anyone have any ideas with the above two problems? in case i wasn't clear, i'll reiterate:
                  i have set up custom drag drop on a tree. when i drag an item to a tree, i call event.preventDefault on dragDrop so i can handle the dragging myself - as i needed to customise the way the dragging worked.

                  you know when you're dragging to a tree, a horizontal line appears to indicate where you're moving the item? well this is the source of my two problems:

                  1. i was able to find Tree.calculateDropIndex() which tells me over which item in the tree the user dropped the item, but this doesn't tell me whether the horizontal line indicator was over, before or after the item. i need to know this to know whether i should be moving the item before, after or inside the item.

                  2. after i prevent default and perform my custom drop functions, the horizontal line indicator remains. i don't know how to get rid of this line...

                  thanks for reading,
                  craig