Telerik RadTreeView: How to skip 'EnableDragAndDropBetweenNodes' for parent node. Child items should show lines.

0 Answers 82 Views
TreeView
G
Top achievements
Rank 1
G asked on 15 Feb 2023, 05:17 PM
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.
Rumen
Telerik team
commented on 17 Feb 2023, 08:37 AM

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

G
Top achievements
Rank 1
commented on 17 Feb 2023, 01:19 PM

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

Rumen
Telerik team
commented on 17 Feb 2023, 02:10 PM

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

}

                                
G
Top achievements
Rank 1
commented on 22 Feb 2023, 02:43 PM

Thanks Rumen for the detailed information. It did help me.
Rumen
Telerik team
commented on 22 Feb 2023, 04:16 PM

You are welcome! Keep up the good work!
G
Top achievements
Rank 1
commented on 28 Feb 2023, 10:23 AM

Curious to know why it's not working when I use below instead of .css("visibility", "hidden");

$telerik.$(".rtDropBelow").hide();
Rumen
Telerik team
commented on 28 Feb 2023, 11:30 AM

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.

G
Top achievements
Rank 1
commented on 06 Mar 2023, 01:10 PM

Thank you.

No answers yet. Maybe you can help?

Tags
TreeView
Asked by
G
Top achievements
Rank 1
Share this question
or