Dragging & Dropping a Cell by an image

2 posts, 0 answers
  1. Alan
    Alan avatar
    9 posts
    Member since:
    Mar 2009

    Posted 25 Jul 2012 Link to this post

    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?

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 26 Jul 2012 Link to this post

    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.

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

    <script type="text/javascript">
        var i;
        function OnClientNodeDropping(sender, args) {
            if (i == 1) {
                i = 0;
            var sourceNode = args.get_sourceNode();
            var destNode = args.get_destNode();
            if (destNode) {
                var newNode = new Telerik.Web.UI.RadTreeNode();
                CloneNode(newNode, sourceNode);
        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();
                    CloneNode(newChildNode, node);
        function OnClientNodeDragging(sender, args) {
            var target = args.get_htmlElement();
            if ((target.tagName != "IMG") && (i != 2)) {
                i = 1;
            else {
                i = 2;

    Hope this helps.

  3. DevCraft R3 2016 release webinar banner
Back to Top