Dropping a node on itself doesn't fire events

13 posts, 0 answers
  1. Matthew
    Matthew avatar
    51 posts
    Member since:
    Nov 2007

    Posted 18 Nov 2008 Link to this post

    I'm using the client side drag & drop functionality and I set a flag to true when the drag starts then set my flag to false when the drag ends (on the OnClientNodeDropping and OnClientNodeDropped events).  It works great unless I drag the node back onto itself.  When I do that, the OnClientNodeDropping and OnClientNodeDropped events don't fire so I don't have a way to reset my flag.  There doesn't seem to be a "OnClientNodeDragEnd" event or any other way to determine when the dragging ended.  How can I capture an event when the node is dragged onto itself?

    Thanks,
    Matt
  2. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 18 Nov 2008 Link to this post

    Hi Matt,

    Indeed, the dropping/dropped events do not fire if a Node is dropped onto itself.

    When to reset the mentioned flag depends specifically on your case.

    Could you provide more information about your goal?

    Regards,
    Simon
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. Matthew
    Matthew avatar
    51 posts
    Member since:
    Nov 2007

    Posted 18 Nov 2008 Link to this post

    I have mouse over events on some DOM elements as well as text that I change while a drag is occurring.  Since I don't want the mouse over events to execute during a drag and since I set my text in an element to "Dragging Node..." while a drag is occurring I need to know when the drag starts and when it stops so I can clear the text and re-enable the mouse over events.  Simply put, I just need to have some event that I can use when the dragging stops...even if the dragging stopped because it was dropped back on itself.  A user may decide that he/she doesn't want to complete the drag after starting it and may decide to drop the node back onto itself, so it's a reasonable scenario.

    Thanks,
    Matt
  4. Matthew
    Matthew avatar
    51 posts
    Member since:
    Nov 2007

    Posted 20 Nov 2008 Link to this post

    Any update on this?

    Thanks,
    Matt
  5. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 21 Nov 2008 Link to this post

    Hello Matt,

    I understood what your goal is, however, with the current implementation of RadTreeView this is not possible.

    On the other hand, since this functionality has been requested a number of times so far we will consider introducing it as the default behavior of the control, e.g. the NodeDropping and NodeDropped events or only the latter to fire when a Node is dropped onto itself.

    Your Telerik points have been updated for your involvement in the matter.

    Thank you.

    Sincerely yours,
    Simon
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Nicolas
    Nicolas avatar
    57 posts
    Member since:
    Dec 2008

    Posted 02 Jul 2009 Link to this post

    Hi,

    sorry to bump an old thread, but I am having the exact same issue. I take it this has not been changed since Nov. 2008. Can you give me more information about that please (any update, possible workaround, ...) ?

    Additionally, dragging a node will break if the cursor gets out of the window (resulting in the same case where a flag has been set and will never be changed back because drop will never occur).Is there any way to get around that (catch drag end, or something like that) ?

    Thank you
  7. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 03 Jul 2009 Link to this post

    Hi Nicolas,

    You can use this as a workaround:

            <script type="text/javascript">
                var dragging = false;
                var $ = $telerik.$;
               
               
                function dragStart(sender, args) {
                    dragging = false;
                   
                    $(document).bind("mouseup", function() {
                        alert("Drop");
                        $(document).unbind("mouseup", arguments.callee);
                        dragging = false;
                    });
                }
            </script>
            <telerik:RadTreeView runat="server" ID="RadTreeView1" EnableDragAndDrop="true" OnClientNodeDragStart="dragStart">
                <Nodes>
                    <telerik:RadTreeNode Text="Node 1" />
                    <telerik:RadTreeNode Text="Node 2" />
                    <telerik:RadTreeNode Text="Node 3" />
                </Nodes>
            </telerik:RadTreeView>

    Regards,
    Albert
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  8. Nicolas
    Nicolas avatar
    57 posts
    Member since:
    Dec 2008

    Posted 06 Jul 2009 Link to this post

    Thank you for the reply.

    I get the idea of the work-around, I'm having trouble however trying to implement it.

    My "NodeDropping" function used pArguments.get_htmlElement(); in order to know where the node was dropped. If I understand, the whole code of the NodeDropping function is supposed to go into that function bound to mouseup. If so, how can I know in there where (atop of which html element) the mouseup occurs?

    Here's a part of my NodeDropping function for a better understanding:

    function tree_Series_NodeDropping(pSender, pArguments) { 
        var div_minichart = document.getElementById("div_minichart"); 
        div_minichart.style.zIndex = 0; 
               
        // Determine if node has been dropped in preview area 
        var tHtmlElement = pArguments.get_htmlElement()
        if (tHtmlElement.id.startsWith("chart_DataPreview") || tHtmlElement.id.startsWith("table_DataPreview")) { 
            // Cancel original postback from tree view 
            pArguments.set_cancel(true); 
     
            ... 
     
            // Post back node data 
            var tArgs = "DisplayData;" 
            tArgs += pArguments.get_sourceNode().get_value() + ";" 
            tArgs += pArguments.get_sourceNode().get_text() + ";"
            tArgs += pArguments.get_sourceNode().get_attributes().getAttribute("DataSiloFarmRecId") + ";"
            tArgs += pArguments.get_sourceNode().get_attributes().getAttribute("DataSiloFarmDetailRecId") + ";"
            tArgs += pArguments.get_sourceNode().get_attributes().getAttribute("ElementKey") + ";"
            tArgs += pArguments.get_sourceNode().get_attributes().getAttribute("ElementKeyId") + ";"
            tArgs += pArguments.get_sourceNode().get_attributes().getAttribute("DataSiloFarmtable") + ";"
            tArgs += t_ConnectionRecId + ";"
            tArgs += t_LastLoadRecId + ";"
            tArgs += (pane.get_width() - 4) + ";"
            tArgs += (pane.get_height() - 4) + ";"
            __doPostBack("updatepanel_Preview", tArgs); 
        } 
        // Metrics dropped on mini-chart: Axis X 
        else if (tHtmlElement.id == 'div_minichartAxisXdropzone') { 
            pArguments.set_cancel(true); 
            var tArgs = "ChangeAxis;X;" 
            tArgs += pArguments.get_sourceNode().get_value() + ";" 
            __doPostBack("updatepanel_Preview", tArgs); 
        } 
        // Metrics dropped on mini-chart: Axis Y 
        else if (tHtmlElement.id == 'div_minichartAxisYdropzone') { 
            pArguments.set_cancel(true); 
            var tArgs = "ChangeAxis;Y;" 
            tArgs += pArguments.get_sourceNode().get_value() + ";" 
            __doPostBack("updatepanel_Preview", tArgs); 
        } 
        // Metrics dropped on mini-chart: Axis Y2 
        else if (tHtmlElement.id == 'div_minichartAxisY2dropzone') { 
            pArguments.set_cancel(true); 
            var tArgs = "ChangeAxis;Y2;" 
            tArgs += pArguments.get_sourceNode().get_value() + ";" 
            __doPostBack("updatepanel_Preview", tArgs); 
        } 
        else { 
            pArguments.set_cancel(true); 
        } 

  9. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 06 Jul 2009 Link to this post

    Hello Nicolas,

    The code in dragstart should cover the two problematic cases - dropping outside of the window and onto the node. In all other cases the nodeDropping event should fire. To get the element on which the node is dropped you can use this code:

    $(document).bind("mouseup", function(e) {
                  var element = e.target;
                        alert("Drop");
                        $(document).unbind("mouseup", arguments.callee);
                        dragging = false;
                    });


    Regards,
    Albert
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  10. Nicolas
    Nicolas avatar
    57 posts
    Member since:
    Dec 2008

    Posted 06 Jul 2009 Link to this post

    Thanks,

    I got this to work. This does cover the case when user drops the node onto itself as well as when user moves the cursor out of the window and then comes back inside the window to release the mouse button. However, if the mouse button is released while being outside of the window, I'm still stuck in a dragging state. Any possible fix to that?

    Thank you

    ps: I don't think it is related but I did not include the line    var $ = $telerik.$;    as it would cause an error saying $telerik is undefined.
  11. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 06 Jul 2009 Link to this post

    Hi Nicolas,

    Capturing the moseup event when the mouse is outside of the browser window does not work always. For example the provided solution will work in FireFox but not in Internet Explorer. The best thing we could do in internet explorer is detect when the mouse leaves the browser and abort the drag operation. To do so you can use this code:

            function dragStart(sender, args) {
                dragging = false;

                $(document).bind("mouseup", function() {
                    alert("Drop");
                    $(document).unbind("mouseup", arguments.callee);
                    dragging = false;
                });
               
                $(document).bind("mouseleave", function(e) {
                    alert("out");
                    dragging=false;
                   
                    $(document).unbind("mouseleave", arguments.callee);
                });
            }

    Regards,
    Albert
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  12. Nicolas
    Nicolas avatar
    57 posts
    Member since:
    Dec 2008

    Posted 07 Jul 2009 Link to this post

    Thanks again for the quick reply.

    However, the above code does nothing in IE8, it never gets into the function bound to mouseleave, even when I move the cursor out of the window.

    Any idea why? Am I missing something?
  13. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 07 Jul 2009 Link to this post

    Hello Nicolas,

    This should've worked. I tried it locally in IE8 and the code was fired. I suggest you open a support ticket and send us your page so we can test.

    Regards,
    Albert
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top