Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Sibling Reordering DND Tree

  1. #1
    Ext GWT Premium Member
    Join Date
    Jun 2010
    Posts
    45

    Default Sibling Reordering DND Tree

    I need a DND tree that can be reordered, but only among siblings within a parent. Given the Sencha Explorer reordering DND demo:

    http://www.sencha.com/examples/explo...reorderingtree

    How could it be modified to only allow reordering of items within a single parent. For example, "Custom Form" should be able to be reordered above/below its siblings but not moved into an unrelated folder or dragged to the top level of the hierarchy.

    Any suggestions? It's probably something simple, but I lack the expertise in DND handlers to see an obvious solution.

    I tried the following but it did not work. The idea was to cancel the event on an enter if the source and target don't have the same parents. Either way, the objects source and target were both null in all tests.

    Code:
    final TreePanelDropTarget target = new TreePanelDropTarget(objTree);
    target.addDNDListener(new DNDListener() {
            @Override
            public void dragEnter(DNDEvent e) {
                   final MyModel source = e.getDragSource().getComponent().getModel();
                   final MyModel target = e.getDropTarget().getComponent().getModel();
                   e.setCancelled(!source.getParent().equals(target.getParent()));
       }
    });

  2. #2
    Ext GWT Premium Member
    Join Date
    Jun 2010
    Posts
    45

    Default

    I was able to make the previous code 'almost' work by explicitly calling setParent() on nodes as they are added to the tree and by changing it to the following:

    Code:
    final TreePanelDropTarget target = new TreePanelDropTarget(objTree);
    target.addDNDListener(new DNDListener() {
            @Override
            public void dragEnter(DNDEvent e) {
                   final MyModel source = objTree.getSelectionModel().getSelectedItem();
                   final TreePanel<MyModel>.TreeNode target = objTree.findNode(e.getTarget());
                   if(target==null || !source.getParent().equals(target.getModel().getParent())) {
                        e.setCancelled(true);
                        return;
                   }
                   super.dragMove(e);
       }
    });
    I say 'almost' because one problem still appears. The code doesn't distinguish between dragging an item between one of its siblings and dragging an item over one of its sibling. In others, it allows siblings to be put inside other siblings.

    Visually, it can't tell the difference between the following two states, the first of which is correct and the second which should blocked.

    dd-move.png

    dd-drop.png

    Any tips for finishing it?

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    You Override the wront method. Also your code is for a TreePanel, not for a TreeGrid. Try this:

    Code:
     TreePanelDropTarget target = new TreePanelDropTarget(tree) {
          @Override
          protected void showFeedback(DNDEvent event) {
            final ModelData source = tree.getSelectionModel().getSelectedItem();
    
            final TreePanel<ModelData>.TreeNode target = tree.findNode(event.getTarget());
            if (target == null || !tree.getStore().getParent(source).equals(tree.getStore().getParent(target.getModel()))) {
              event.getStatus().setStatus(false);
              event.setCancelled(true);
              Insert.get().hide();
              return;
            }
    
            super.showFeedback(event);
          }
    
        };
    Also sorry for the delay of my reply. Somehow i missed this post.

  4. #4
    Ext GWT Premium Member
    Join Date
    Jun 2010
    Posts
    45

    Default

    Sorry about that. I am working with a TreePanel, I just pulled the screenshot from the web and used a grid by mistake.

    The updated code does help me not have to explicitly call setParent(), but it still allows nodes to be put on top of siblings, not just between.

  5. #5
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    You need to set the FeedBack to FeedBack.INSERT. However, there is an issue. Give me a few more minutes and i will have it fixed in SVN for both TreePanelDropTarget and TreeGridDropTarget.

  6. #6
    Ext GWT Premium Member
    Join Date
    Jun 2010
    Posts
    45

    Default

    Thanks, I tried setting it to INSERT, but did not resolve the issue. I'll wait for your fix.

    One other question. I want to read the new order to update an underlying data model. This seems to work perfectly for my needs although since I overwrote the wrong method before, I was hoping you could review it for validity:

    Code:
    final TreePanelDropTarget target = new TreePanelDropTarget(objTree) {
    
        ...
    
        @Override
        protected void onDragDrop(DNDEvent event) {
            final MyModel target = (MyModel)activeItem.getModel();
            
            // Finish drag and drop event to position all children
            super.onDragDrop(event);
            
            // Get children of parent in new ordering
            final MyModel parent = objStore.getParent(target);
            final List<MyModel> children = objTree.getStore().getChildren(parent);
    
            // Iterate over children
            ...   
        }
    }
    I had to call the super method in the middle of the method. If I call it first in the method, the reference isn't available for the target. If I call it at the end of the method, iterating over the children doesn't show the node that is being moved.

  7. #7
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    Code looks good.

    Thanks, I tried setting it to INSERT, but did not resolve the issue. I'll wait for your fix.
    No, because its broken However its working fine for me already locally.

  8. #8
    Ext GWT Premium Member
    Join Date
    Jun 2010
    Posts
    45

    Default

    Is there any method I could override that would have the same effect? If this is a bug, any idea when it will make it to a release?

  9. #9
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    There is no easy way to override this. It will be in SVN in a few hours and will be part of GXT 2.2.1 (planned to be released beginning of october)

  10. #10
    Ext GWT Premium Member
    Join Date
    Jun 2010
    Posts
    45

    Default

    All right, thanks for help! I appreciate it.

Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 12
    Last Post: 11 Jun 2010, 2:21 PM
  2. DnD Grid reordering does not reorder the binded list
    By Kilk in forum Ext GWT: Discussion
    Replies: 3
    Last Post: 1 Mar 2010, 2:53 AM
  3. Replies: 1
    Last Post: 29 Apr 2009, 10:28 AM
  4. DD on tree without reordering
    By KciNicK in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 16 Jan 2008, 4:12 PM
  5. Tree - How to close sibling nodes on click
    By goodieboy in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 29 Nov 2007, 11:12 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •