I am using telerik version 2014.3.1024.45 with Asp.Net Webforms
I have 'EnableDragAndDropBetweenNodes' property to true in my telerik control. In the run time I am also adding parent node. When I drag an item and hover on other item, I see dotted line (below or above the item) which indicates the position of insertion. When I drag an item and hover on parent node, I can also see dotted lines.
My need is that, when I drag on parent node, I do not want that dotted line (only for parent node). How can I achieve it ? Setting 'EnableDragAndDropBetweenNodes' to false or true statically in control will apply for all the items (Subitems and Parent Node). I tried setting EnableDragAndDropBetweenNodes dynamically on MouseOver event, but it still shows me the dotted line on parent node.
I have 'EnableDragAndDropBetweenNodes' property to true in my telerik control. In the run time I am also adding parent node. When I drag an item and hover on other item, I see dotted line (below or above the item) which indicates the position of insertion. When I drag an item and hover on parent node, I can also see dotted lines.
My need is that, when I drag on parent node, I do not want that dotted line (only for parent node). How can I achieve it ? Setting 'EnableDragAndDropBetweenNodes' to false or true statically in control will apply for all the items (Subitems and Parent Node). I tried setting EnableDragAndDropBetweenNodes dynamically on MouseOver event, but it still shows me the dotted line on parent node.
Hi G,
You can get reference to the dropindicator element via its CSS class ($telerik.$(".rtDropAbove");) and to control its visibility depending on the DestinationNode
$telerik.$(".rtDropAbove").css("visibility", "hidden"):
Examine the OnClientNodeDragging and OnClientNodeDropping client events in the docs and the demo https://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/draganddropnodes/defaultcs.aspx to get an idea how to implement the solution. The args.get_destNode() of the OnClientNodeDropping event, retrieves a reference to the destination node, i.e. the node that is being dropped onto.
On a side note, version 2014.3.1024.45 is vulnerable to some critical vulnerabilities and it is strongly recommended to upgrade to the latest version or at least to 2020.1.114 to protect your app - https://docs.telerik.com/devtools/aspnet-ajax/knowledge-base/common-allows-javascriptserializer-deserialization.
Thanks Rumen for the information. I tried below but no luck
1. I was trying below on MouseOver for any node just to check if it hides the dotted line. However I can see dotted line. I assume for below dotted line the class is 'rtDropBelow'
$telerik.$(".rtDropAbove").css("visibility", "hidden");
$telerik.$(".rtDropBelow").css("visibility", "hidden");
2. OnClientNodeDropping - It calls this event post dotted line animation (as soon as we dropped)
3. OnClientNodeDragging - I don't give dest_node unless we drop the element
There are two approaches:
1) To set a small timeout:
window.onNodeDragging = function (sender, args) {
var target = args.get_htmlElement();
if (!target) { return; }
setTimeout(function () {
$telerik.$(".rtDropAbove").css("top", "-10000px");
$telerik.$(".rtDropBelow").css("left", "-10000px");
$telerik.$(".rtDropAbove").css("visibility", "hidden");
$telerik.$(".rtDropBelow").css("visibility", "hidden");
console.log(target);
}, 0);
2) Override the _onDocumentMouseMove and _positionDropClue functions from the radTreeView.js source code file where this hover functionality is implemented and covered. Here is an example of how to override a function:
Telerik.Web.UI.RadTreeView.prototype._positionDropClue = function(e) {
//the original and customized function code here
}
$telerik.$(".rtDropBelow").hide();
The hide() jQuery method sets display: none to the specified rtDropBelow element which completely removes it from the page. This causes a JavaScript error since the target element is no longer available. That is why I provided a solution to reposition the rtDropBelow element or hide it with visibility hidden.