How to prevent drop and change icon

[Al]

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.

 

[Ivan Danchev]

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

[Al]

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.

[Ivan Danchev]

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

[Al]

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);
        }
    }

}

[Ivan Danchev]

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