How to prevent drop and change icon

6 posts, 0 answers
  1. Al
    Al avatar
    203 posts
    Member since:
    Oct 2006

    Posted 05 Jun 2015 Link to this post

    Hi,

    I am using OnClientNodeDragging to track when a node is being dragged. I want to allow dropping only on certain nodes and to display a 'no entry' icon when dragging over an non-drop node. (similar to what the RadTreeview does when you drag a node over itself)

    I assume I need to use 'set_allowDrop' but I can only set this on the node being dragged, not the underlying node ie. I want to get a reference to the node being dropped on, not the html object from get_htmlElement.

     

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    830 posts

    Posted 08 Jun 2015 Link to this post

    Hello,

    By using the get_destNode() client side method you can get a reference to the destination node in the RadTreeView's OnClientNodeDropping client-side event handler, as shown in the following example:
    <script type="text/javascript">
        function OnClientNodeDropping(sender, eventArgs) {
            if (eventArgs.get_destNode().get_text() == "Root2") {
                eventArgs.set_cancel(true);
            }
        }
    </script>
     
    <telerik:RadTreeView runat="server" EnableDragAndDrop="true" ID="RadTreeView1" EnableDragAndDropBetweenNodes="true" OnNodeDrop="RadTreeView1_NodeDrop" OnClientNodeDropping="OnClientNodeDropping">
        <Nodes>
            <telerik:RadTreeNode runat="server" Text="Root1">
                <Nodes>
                    <telerik:RadTreeNode runat="server" Text="Child1.1">
                        <Nodes>
                            <telerik:RadTreeNode runat="server" Text="Lvl2 Child1.1"></telerik:RadTreeNode>
                            <telerik:RadTreeNode runat="server" Text="Lvl2 Child1.2"></telerik:RadTreeNode>
                            <telerik:RadTreeNode runat="server" Text="Lvl2 Child1.3"></telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode runat="server" Text="Child1.2"></telerik:RadTreeNode>
                    <telerik:RadTreeNode runat="server" Text="Child1.3"></telerik:RadTreeNode>
                </Nodes>
            </telerik:RadTreeNode>
            <telerik:RadTreeNode runat="server" Text="Root2">
            </telerik:RadTreeNode>
        </Nodes>
    </telerik:RadTreeView>

    In this example we check if the destination node's Text is equal to "Root2" and if so we cancel the event. The OnClientNodeDropping client side event is the perfect place to allow/cancel the node drop depending on certain condition.

    Regards,
    Ivan Danchev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Al
    Al avatar
    203 posts
    Member since:
    Oct 2006

    Posted 09 Jun 2015 in reply to Ivan Danchev Link to this post

    Thanks Ivan, I had actually used OnClientNodeDropping before.

    My problem is that I don't want to just prevent dropping, I need the user to know that they can't drop on certain nodes which is why I started looking at the OnClientNodeDragging event - as the user drags a node I as hoping to change cursor icon etc. to indicate when they can/can't drop.

  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    830 posts

    Posted 10 Jun 2015 Link to this post

    Hello,

    I am afraid, the OnClientNodeDropping client-side event does not have an equivalent of the OnClientNodeDropping's get_destNode() method.

    You could do something like:
    function OnClientNodeDragging(sender, eventArgs) {
        var hoveredElement = eventArgs.get_htmlElement().innerHTML;
        if (hoveredElement == "Root2") {
            eventArgs.get_htmlElement().style.color = "red";
        };
    }

    and hardcode (like I did with "Root2") all the Nodes that you don't want the user to drop the node on, which in combination with the OnClientNodeDropping would display an indication when the user drags a node over a drop-forbidden node and prevent the drop.

    Regards,
    Ivan Danchev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Al
    Al avatar
    203 posts
    Member since:
    Oct 2006

    Posted 11 Jun 2015 in reply to Ivan Danchev Link to this post

    Thanks Ivan, that doesn't really work because I want to change some visual on the node being dragged, not the node being dropped on. I found that using set_allowDrop gives exactly what I need so I am using this code:

    function OnClientNodeDragStart(sender, args) {
     
        var node = args.get_node();
     
        var nodes = sender.get_allNodes();
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].get_text() == "IT") {
                nodes[i].set_allowDrop(false);
            } else {
                nodes[i].set_allowDrop(true);
            }
        }
     
    }

  7. Ivan Danchev
    Admin
    Ivan Danchev avatar
    830 posts

    Posted 15 Jun 2015 Link to this post

    Hello,

    Yes, this is the approach that you can use if you want to display an indication on the dragged node. I am glad you found a way to accomplish this.

    Regards,
    Ivan Danchev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017