The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

[CLOSED] DragEnd event in TreeViewDragDrop plugin

  1. #1

    [CLOSED] DragEnd event in TreeViewDragDrop plugin

    Hallo,
    I have TabPanel with two tabs - A and B.
    Each tab contains TreePanel with TreeViewDragDrop plugin defined and I want to drag nodes from tab A and drop on tab B.
    When I drag an item from tab A over tab B button, I activate tab B to get the drop zone available.

    For this purpose, I created variable isDraggingStarted which I set to true on Drag event of tab A (to indicate that dragging started and is in a process). This flag is then tested on tab's B MouseOver and if 'true' I activate this tab to allow drop. After the drop, I reset this flag back to false (to avoid tab B activation every time the mouse is over tab B button).

    Everything works well except the situation when a user does not finish dragging (e.g. drop item outside drop area) => isDraggingStarted remains true. To handle this I need to fire DragEnd event and reset flag here. How do I force this event to fire?

    Second option is to use some kind of system level Ext flag which indicates that dragging is in process (and get rid of my own flag). Is there any indicator I can use for that purpose?

    Besides many other things I tried also DragTracker which fires DragEnd event fine but also causes drag and drop stops working.

    Can you please help me with the solution? Thank you.


    <script type="text/javascript">
    
            var _nelisRegisterTabEvents = function (tabPanel) {
                tabPanel.items.each(function (tab) {
                    var index = tabPanel.items.indexOf(tab);
                    tabPanel.getTabBar().items.get(index).on('mouseover', function (event) { if (isDraggingStarted) Ext.getCmp("_nelisTabPanelId").setActiveTab("B"); }, this);
                });
            }
    
    </script>
    
    // TAB A
    public Ext.Net.Container.Builder RenderAsTree()
    {
        Container container = new Container()
        {
            ID = "_nelisMenuTreeId",
            Layout = "Accordion"
        };
        container.LayoutConfig.Add(new AccordionLayoutConfig() { Animate = true });
    
        Node root = new Node();
    
        TreePanel moduleA = new TreePanel() {
            Title = rootItem.Text,
            RootVisible = false,
            Scrollable = ScrollableOption.Both,
            UseArrows = true,
            Border = false
        };
        moduleA.Listeners.ItemClick.Fn = "Nelis.Main.onMenuClick";
        moduleA.Root.Add(root);
    
        TreeView tv = new TreeView();
        tv.Plugins.Add(new TreeViewDragDrop() {
            ContainerScroll = true,
            Copy = true,
            EnableDrop = false
        });
        tv.Listeners.Drag.Fn = "_nelisTreeMenu_startDrag"; // sets isDraggingStarted = true
        moduleA.View.Add(tv);
    
        container.Items.Add(moduleA);
    
        return container.ToBuilder();
    }
    
    
    // TAB B
    public Ext.Net.Container.Builder RenderUserMenu()
    {
        Container container = new Container()
        {
            ID = "_nelisMenuUserId",
            Layout = "Accordion"
    
        };
        container.LayoutConfig.Add(new Ext.Net.AccordionLayoutConfig() { Animate = true });
    
        Node root = new Node()
        {
            Text = "DROP MENU ITEM HERE",
            AllowDrag = false,
            Icon = Icon.BookmarkAdd,
            Leaf = true
        };
    
        TreePanel moduleB = new TreePanel()
        {
            Border = false,
            BufferedRenderer = false, // important! without this it crashes: [E] Ext.grid.plugin.BufferedRenderer.scrollTo(): Unknown record passed to BufferedRenderer#scrollTo + Uncaught Error: Unknown record passed to BufferedRenderer#scrollTo
            UseArrows = true
        };
        moduleB.Listeners.ItemClick.Fn = "Nelis.Main.onMenuClick";
        moduleB.Listeners.AfterRender.Handler = "Ext.dd.DragDropManager.useCache = false;"; // important! without this drag & drop works only once for the very first time
        moduleB.Root.Add(root);
    
        TreeView tv = new TreeView();
        tv.Plugins.Add(new TreeViewDragDrop() {
            ContainerScroll = true,
            AllowContainerDrops = true,
            EnableDrop = true
        });
        tv.Listeners.BeforeDrop.Fn = "_nelisTreeMenu_beforeDrop"; // if canceled sets isDraggingStarted = false
        tv.Listeners.Drop.Fn = "_nelisTreeMenu_Drop"; // sets isDraggingStarted = false
        moduleB.View.Add(tv);
    
        container.Items.Add(moduleB);
    
        return container.ToBuilder();
    }
    Last edited by fabricio.murta; Mar 21, 2017 at 9:16 PM.
  2. #2
    Hello @NewLink!

    At first, DragEnd should be triggering both in success and in failure. It is probably not triggering -- or maybe triggering and you are not treating it the way it was necessary.

    Unfortunately the code parts you provided do not allow us to run your test case. Can you provide a runnable test case so we can run in our side and advise?

    If in doubt, there's a few threads with directions on making runnable code samples that we can run and reproduce your issue.

    - Tips for creating simplified code samples
    - More Information Required
    - Forum Guidelines

    In general terms, they are written the way examples explorers' samples are: a minimal set of pages with code behind merged to the ASPX whenever possible. The simpler, the better we can focus on your actual problem and provide best support on it.

    For instance, see this example with drag and drop functionality: Drag and drop on Grid Panel: Cell to Cell drag-dropping.. Notice how code behind is merged to the rest of the page code there (by clicking the 'source' button top-left of the example itself).

    Looking forward to your test case! :)
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi Fabrício,
    thank you for the prompt reply and I know that providing test case is the best way how to ask for help. However, I'm not reporting an error or problem, so - in my opinion - sample code does not solve too much. I simply don't know how to configure TreePanel or TreeViewDragDrop plugin in order to react to DragEnd event.

    My solution is completely based on following example: http://mvc.ext.net/#/TreePanel_Basic...Between_Trees/

    If you will use that code and give an advice based on this example on how to trigger DragEnd event... it will be just fine. I published my code snippet only to give you a detailed overview on how TreePanel and TreeView from Ext.Net example are implemented in my solution (together with description why I need it).

    As you can see in my code, I'm able to treat Drag, BeforeDrop and Drop events, but I have no idea how to fire DragEnd event (or any other event which is triggered when an item is dropped outside the drop zone).

    Please let me know if this is more clear now or if I still have to provide you with a test case.

    Thank you for your assistance.
    Last edited by NewLink; Mar 21, 2017 at 8:59 AM.
  4. #4
    Hello @NewLink!

    In most cases we need a test case in order to understand and be able to get to the point you are, and many times be able to understand what should be done in that situation for the scenario to work.

    Well, the example you pointed seems fair enough. In that example, in order to fire an event when the dragging ends, just give the plugin an ID and then bind a function for the plugin's drag zone 'end drag'.

    The plug in has its limitations and one seems to be the lack of proper listeners. So that's the simplest way I could find of grabbing the event out of that plug in.

    For example, on the left grid, you should change the plugin line to:

    X.TreeViewDragDrop().ID("tvdd").AppendOnly(true).ContainerScroll(true)
    And add a script to the head section of the example with the following code:

    <script type="text/javascript">
        var handleEndDrag = function (item, evnt) {
            console.log('end dragging record: ' + item.records[0].data.text + ' on event ' + evnt.type);
        }
    
        Ext.onReady(function () {
            App.tvdd.dragZone.onEndDrag = handleEndDrag;
        });
    </script>
    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hi Fabrício,
    I understand that the test case is the best if you want to help in a meaningful way and in the meantime I have prepared it. However, you were faster ... and that's exactly what I was looking for.

    Thank you for your valuable assistance.
  6. #6
    Hello!

    Glad it was of help! In fact you provided the test case when you pointed the example in Examples Explorer, in which I could get down to the issue and provide a solution. Or else, we would still be trying out to figure out what the problem was... :)
    Fabrício Murta
    Developer & Support Expert
  7. #7
    Hi Fabrício,
    it might be a good idea extend the plug with dragzone (and dropzone) object especially when the API documentation does not recommend their use (it is marked as private utility). TreeViewDragDrop is simple to use and make control over drag & drop wider would certainly be welcomed by many.

    I will share my solution as it can be helpful for others fighting with a similar problem. Since my tab container contains many TreePanels generated according to the database definition with IDs that are not fixed (easily predictable), I had to implement the following solutions:

    Ext.onReady(function () {
        Ext.getCmp("containerId").items.each(function (item) {
            item.getView().findPlugin('treeviewdragdrop').dragZone.onEndDrag = handleEndDrag;
        });
    });
    Thanks for help, the thread can be closed.

    Dan
  8. #8
    Hello Dan!

    Thanks for the feedback and for sharing the solution that worked best for your context!

    You are right, that using private resources is not guaranteed in any way to work in next versions and, probably with the idea of being a simple plug in, the TreeViewDragDrop plugin did not fancy many features. The correct thing would be to have the enddrag event implemented to the plug in, what seems not to be the case, probably due to low to no demand of the feature -- at least from Sencha side.

    But when it comes to extending and custom behaviors, sometimes it can't be avoided but rely on such private resources, which as an example is Ext.dd.DDProxy.endDrag(), and is used on the DOM DragDrop example which, in fact, needs reviewing after 4.2.0 release due to breaking changes.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 3
    Last Post: Jul 22, 2014, 1:55 PM
  2. [CLOSED] DragDrop in treepanel using TreeViewDragDrop plugin
    By pawangyanwali in forum 2.x Premium Help
    Replies: 14
    Last Post: Apr 29, 2013, 4:36 AM
  3. Replies: 4
    Last Post: Apr 24, 2013, 6:35 AM
  4. TreeViewDragDrop With restriction in before drop
    By shunilkarki in forum 2.x Help
    Replies: 5
    Last Post: Apr 16, 2013, 9:50 AM
  5. [CLOSED] TreeViewDragDrop plugin on over event
    By Leonid_Veriga in forum 2.x Premium Help
    Replies: 3
    Last Post: Dec 21, 2012, 6:39 AM

Posting Permissions

Subscribe now to get the latest Ext.NET happenings in our newsletter.