This is a migrated thread and some comments may be shown as answers.

Dragging & Dropping a Cell by an image

1 Answer 22 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Alan
Top achievements
Rank 1
Alan asked on 25 Jul 2012, 07:09 PM
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?

1 Answer, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 26 Jul 2012, 06:13 AM
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.
Tags
TreeView
Asked by
Alan
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Share this question
or