This is a migrated thread and some comments may be shown as answers.

Dropping a node on itself doesn't fire events

12 Answers 115 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Matthew
Top achievements
Rank 1
Matthew asked on 18 Nov 2008, 04:11 PM
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

12 Answers, 1 is accepted

Sort by
0
Simon
Telerik team
answered on 18 Nov 2008, 04:46 PM
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.
0
Matthew
Top achievements
Rank 1
answered on 18 Nov 2008, 06:57 PM
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
0
Matthew
Top achievements
Rank 1
answered on 21 Nov 2008, 12:07 AM
Any update on this?

Thanks,
Matt
0
Simon
Telerik team
answered on 21 Nov 2008, 03:10 PM
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.
0
Nicolas
Top achievements
Rank 1
answered on 02 Jul 2009, 03:45 PM
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
0
Atanas Korchev
Telerik team
answered on 03 Jul 2009, 07:56 AM
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.
0
Nicolas
Top achievements
Rank 1
answered on 06 Jul 2009, 08:16 AM
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); 
    } 

0
Atanas Korchev
Telerik team
answered on 06 Jul 2009, 08:39 AM
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.
0
Nicolas
Top achievements
Rank 1
answered on 06 Jul 2009, 09:53 AM
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.
0
Atanas Korchev
Telerik team
answered on 06 Jul 2009, 10:40 AM
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.
0
Nicolas
Top achievements
Rank 1
answered on 07 Jul 2009, 08:04 AM
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?
0
Atanas Korchev
Telerik team
answered on 07 Jul 2009, 10:23 AM
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.
Tags
TreeView
Asked by
Matthew
Top achievements
Rank 1
Answers by
Simon
Telerik team
Matthew
Top achievements
Rank 1
Nicolas
Top achievements
Rank 1
Atanas Korchev
Telerik team
Share this question
or