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
Thanks,
Matt
12 Answers, 1 is accepted
0
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.
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
Thanks,
Matt
0
Matthew
Top achievements
Rank 1
answered on 21 Nov 2008, 12:07 AM
Any update on this?
Thanks,
Matt
Thanks,
Matt
0
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.
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
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
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.
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:
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
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.
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.
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
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.
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?
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
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.
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.