Dragging & Dropping a Cell by an image

[Alan]

I have an ASP.NET TreeView that I want to be able to drag and drop nodes. It is working just fine, except for one thing. If you look at my screen shot image, you will see a double headed arrow next to each node. I want to be able to drag and drop nodes ONLY by dragging and dropping the double headed arrow image. Right now, you can drag anywhere on the cell and drop. Can you please explain how this is done?

[Princy]

Hi Alan,

One suggestion is that you can cancel the Drag and Drop by checking the tagName of the dragged HtmlElement. Following is the sample code.

ASPX:

<telerik:RadTreeView ID="RadTreeView1" runat="server" EnableDragAndDrop="true" EnableDragAndDropBetweenNodes="true" OnClientNodeDropping="OnClientNodeDropping" onnodedrop="RadTreeView1_NodeDrop" OnClientNodeDragging="OnClientNodeDragging">
 <Nodes>
    .........
 </Nodes>
 <NodeTemplate>
   <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/bullet5.jpg" />
   <%# DataBinder.Eval(Container, "Text") %>
 </NodeTemplate>
</telerik:RadTreeView>

JS:

<script type="text/javascript">
    var i;
    function OnClientNodeDropping(sender, args) {
        if (i == 1) {
            args.set_cancel(true);
            i = 0;
            return;
                }
        var sourceNode = args.get_sourceNode();
        var destNode = args.get_destNode();
        if (destNode) {
            sender.trackChanges();
            var newNode = new Telerik.Web.UI.RadTreeNode();
            newNode.set_text(sourceNode.get_text());
            newNode.set_value(sourceNode.get_value());
            destNode.get_nodes().add(newNode);
            CloneNode(newNode, sourceNode);
            destNode.set_expanded(true);
            sender.commitChanges();
        }
    }
    function CloneNode(newNode, sourceNode) {
        if (sourceNode.get_nodes().get_count() > 0) {
            for (var i = 0; i < sourceNode.get_nodes().get_count(); i++) {
                var node = sourceNode.get_nodes().getNode(i);
                var newChildNode = new Telerik.Web.UI.RadTreeNode();
                newChildNode.set_text(node.get_text());
                newChildNode.set_value(node.get_value());
                newNode.get_nodes().add(newChildNode);
                CloneNode(newChildNode, node);
            }
        }
    }
    function OnClientNodeDragging(sender, args) {
        var target = args.get_htmlElement();
        if ((target.tagName != "IMG") && (i != 2)) {
            i = 1;
            args.set_cancel(true);
            return;
        }
        else {
            i = 2;
        }
    }
</script>

Hope this helps.

Regards,
Princy.