DragAndDrop zone

[Keith]

We are using the TreeView control(ASP.NET AJAX Controls ver 2008.2 1001) in a interface that allows the user to drag and drop a link listed in a tree view on the left ( Available Links) to a tree view on the right (Goup Structure); illustrated in the attached screenshot.

If the user drag and drops the selected link i.e "05 KM Conference to the tree view on the right side and the cursor is not toward the top of the tree view, the drag and drop works just fine. However, if it is near the top, the drag and drop does nothing.

By using the IE Developer toolbar, we have been able to determine that there is a UL element with the class names "rtUL" and "rtLines" at the top of the empty tree view. This is highlighted with a blue border in the screen shot and you can see it highlighted in gray in the DOM structure listing the IE Developer toolbar. If the user drag drops the link from the tree view on the left and they attempt to release the drag and drop to the tree view on the right and the cursor is over this UL element (indicated by the red line on the screen shot), the drop does not occur. If they do it to any other area (indicated by the green line on the screen shot), it works.

So, it appears that this non-visible UL element interferes with the drag and drop function. It also appears that this UL element is part of the treeview rendering.

Any fix for this unwanted behavior?

Thanks in advance,

Keith E.

[Yana]

Hi Keith,

Could you please paste the code of your page here so we to be able to test this issue? Thanks

Kind regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Keith]

Yana,

Here's the code:

<%@ Page Language="C#" MasterPageFile="~/Admin/LinksAdminMaster.Master" AutoEventWireup="true" CodeBehind="EditGroup.aspx.cs" Inherits="KN.Web.Links.Admin.EditGroup" Title="Untitled Page" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="cphLinksContent2" runat="server">
    <script language="javascript" type="text/javascript">
        var treeChanges = false;
        var needToConfirm = true;
        window.onbeforeunload = confirmExit;

        function confirmExit() {
            if (needToConfirm && isPageDirty())
                return 'You have unsaved changes.  Unsaved changes will be lost if you navigate away.';
        }

        function isPageDirty() {
            var dirty = treeChanges;
            if (document.getElementById('<%= txtTitle.ClientID %>').value != document.getElementById('<%= hfTitle.ClientID %>').value)
                dirty = true;
            if ((document.getElementById('<%= chkbxHideGroupTitle.ClientID %>').checked && document.getElementById('<%= hfHideGroupTitle.ClientID %>').value == 'false') ||
                (!document.getElementById('<%= chkbxHideGroupTitle.ClientID %>').checked && document.getElementById('<%= hfHideGroupTitle.ClientID %>').value == 'true'))
                dirty = true;
            if ((document.getElementById('<%= chkbxShowIcons.ClientID %>').checked && document.getElementById('<%= hfShowIcons.ClientID %>').value == 'false') ||
                (!document.getElementById('<%= chkbxShowIcons.ClientID %>').checked && document.getElementById('<%= hfShowIcons.ClientID %>').value == 'true'))
                dirty = true;
            return dirty;
        }
        
        function onClientButtonClick(sender, args) {
            if (args.get_item().get_commandName() == "Save") {
                needToConfirm = false;
            }
            if (args.get_item().get_commandName() == "Delete") {
                var response = confirm('Do you wish to delete this Group from this CoP?');
                args.set_cancel(!response);
                if (response) needToConfirm = false;
            }
            if (args.get_item().get_commandName() == "Undo") {
                resetStructure();
            }
        }

        function resetStructure() {
            var groupStructTree = $find("<%= rtvGroupLinks.ClientID %>");
            var commTree = $find("<%= rtvCommunityLinks.ClientID %>");
            var moduleTree = $find("<%= rtvModuleLinks.ClientID %>");

            groupStructTree.trackChanges();
            commTree.trackChanges();
            moduleTree.trackChanges();

            for (var i = commTree.get_nodes().get_count() - 1; i >= 0; i--) {
                var menuLevel = commTree.get_nodes().getNode(i).get_attributes().getAttribute("MenuLevel");
                if (menuLevel != "-1") {
                    var node = commTree.get_nodes().getNode(i);
                    node.get_parent().get_nodes().remove(node);
                    groupStructTree.get_nodes().add(node);
                }
            }

            for (var j = moduleTree.get_nodes().get_count() - 1; j >= 0; j--) {
                var menuLevel = moduleTree.get_nodes().getNode(j).get_attributes().getAttribute("MenuLevel");
                if (menuLevel != "-1") {
                    var node = moduleTree.get_nodes().getNode(j);
                    node.get_parent().get_nodes().remove(node);
                    groupStructTree.get_nodes().add(node);
                }
            }
            
            var groupStructNodes = groupStructTree.get_allNodes();
            for (var h = groupStructTree.get_allNodes().length - 1; h >= 0; h--) {
                var node = groupStructNodes[h];
                node.get_parent().get_nodes().remove(node);
                if (node.get_attributes().getAttribute("MenuLevel") != "-1")
                    groupStructTree.get_nodes().add(node);
                else {
                    if (node.get_category() == 'module') {
                        var index = insertIndex(node, moduleTree.get_nodes());
                        moduleTree.get_nodes().insert(index, node);
                    }
                    else {
                        var index = insertIndex(node, commTree.get_nodes());
                        commTree.get_nodes().insert(index, node);
                    }
                }
            }

            for (var g = 0; g < groupStructTree.get_allNodes().length; g++) {
                var node = groupStructTree.findNodeByAttribute("SortOrder", g);
                node.set_expanded(true);
                node.get_parent().get_nodes().remove(node);
                if (node.get_attributes().getAttribute("MenuLevel") == "0")
                    groupStructTree.get_nodes().insert(g, node);
                else {
                    var previousNode = groupStructTree.findNodeByAttribute("SortOrder", g - 1);
                    if (node.get_attributes().getAttribute("MenuLevel") == previousNode.get_attributes().getAttribute("MenuLevel"))
                        previousNode.get_parent().get_nodes().add(node);
                    if (node.get_attributes().getAttribute("MenuLevel") > previousNode.get_attributes().getAttribute("MenuLevel"))
                        previousNode.get_nodes().add(node);
                    if (node.get_attributes().getAttribute("MenuLevel") < previousNode.get_attributes().getAttribute("MenuLevel")) {
                        for (var k = previousNode.get_attributes().getAttribute("MenuLevel"); k >= node.get_attributes().getAttribute("MenuLevel"); k--)
                            previousNode = previousNode.get_parent();
                        previousNode.get_nodes().add(node);
                    }
                }
            }

            groupStructTree.commitChanges();
            commTree.commitChanges();
            moduleTree.commitChanges();
            treeChanges = false;
        }

           function onNodeDroppingFromAvailLinks(sender, args) {
               var groupStructTree = $find("<%= rtvGroupLinks.ClientID %>");
               var target = args.get_htmlElement();
               var dest = args.get_destNode();
               if (isDroppedOn(groupStructTree, dest, target)) dropNodesOnGroupStruct(sender, args);
           }

           function dropNodesOnGroupStruct(sender, args) {
               var groupStructTree = $find("<%= rtvGroupLinks.ClientID %>");
               var commTree = $find("<%= rtvCommunityLinks.ClientID %>");
               var moduleTree = $find("<%= rtvModuleLinks.ClientID %>");
               var target = args.get_htmlElement();
               var destNode = args.get_destNode();
               var sourceNodes = args.get_sourceNodes();

               groupStructTree.trackChanges();
               commTree.trackChanges();
               moduleTree.trackChanges();
               for (var i = 0; i < sourceNodes.length; i++) {
                   var sourceNode = sourceNodes[i];
                   sourceNode.get_parent().get_nodes().remove(sourceNode);
                   if (destNode) {
                       var dropPosition = args.get_dropPosition();
                       if (dropPosition == "over") {
                           destNode.get_nodes().add(sourceNode);
                           destNode.set_expanded(true);
                       }
                       if (dropPosition == "above") insertBefore(destNode, sourceNode);
                       if (dropPosition == "below") insertAfter(destNode, sourceNode);
                   }
                   else groupStructTree.get_nodes().add(sourceNode);
               }
               groupStructTree.commitChanges();
               commTree.commitChanges();
               moduleTree.commitChanges();
               treeChanges = true;
           }

           function insertBefore(destinationNode, sourceNode) {
               var destinationParent = destinationNode.get_parent();
               var index = destinationParent.get_nodes().indexOf(destinationNode);
               destinationParent.get_nodes().insert(index, sourceNode);
           }

           function insertAfter(destinationNode, sourceNode) {
               var destinationParent = destinationNode.get_parent();
               var index = destinationParent.get_nodes().indexOf(destinationNode);
               destinationParent.get_nodes().insert(index + 1, sourceNode);
           }

           function onNodeDroppingFromGroupStruct(sender, args) {
               var groupStructTree = $find("<%= rtvGroupLinks.ClientID %>");
               var commTree = $find("<%= rtvCommunityLinks.ClientID %>");
               var moduleTree = $find("<%= rtvModuleLinks.ClientID %>");
               var target = args.get_htmlElement();
               var dest = args.get_destNode();
               if (isDroppedOn(commTree, dest, target) || isDroppedOn(moduleTree, dest, target)) dropNodesOnAvailLinks(sender, args);
               if (isDroppedOn(groupStructTree, dest, target)) dropNodesOnGroupStruct(sender, args);
           }

           function dropNodesOnAvailLinks(sender, args) {
               var groupStructTree = $find("<%= rtvGroupLinks.ClientID %>");
               var commTree = $find("<%= rtvCommunityLinks.ClientID %>");
               var moduleTree = $find("<%= rtvModuleLinks.ClientID %>");
               var target = args.get_htmlElement();
               var destNode = args.get_destNode();
               var sourceNodes = args.get_sourceNodes();

               groupStructTree.trackChanges();
               commTree.trackChanges();
               moduleTree.trackChanges();

               for (var i = 0; i < sourceNodes.length; i++) {
                   var sourceNode = sourceNodes[i];
                   sourceNode.get_parent().get_nodes().remove(sourceNode);
                   if (sourceNode.get_category() == 'module') {
                       var index = insertIndex(sourceNode, moduleTree.get_nodes());
                       moduleTree.get_nodes().insert(index, sourceNode);
                   }
                   else {
                       var index = insertIndex(sourceNode, commTree.get_nodes());
                       commTree.get_nodes().insert(index, sourceNode);
                   }
                   removeNestingOnAvailLinks(sourceNode.get_nodes());
               }
               groupStructTree.commitChanges();
               commTree.commitChanges();
               moduleTree.commitChanges();
               treeChanges = true;
           }

           function removeNestingOnAvailLinks(collection) {
               var commTree = $find("<%= rtvCommunityLinks.ClientID %>");
               var moduleTree = $find("<%= rtvModuleLinks.ClientID %>");
               for (var i = collection.get_count() - 1; i >= 0; i--) {
                   var sourceNode = collection.getNode(i);
                   sourceNode.get_parent().get_nodes().remove(sourceNode);
                   if (sourceNode.get_category() == 'module') {
                       var index = insertIndex(sourceNode, moduleTree.get_nodes());
                       moduleTree.get_nodes().insert(index, sourceNode);
                   }
                   else {
                       var index = insertIndex(sourceNode, commTree.get_nodes());
                       commTree.get_nodes().insert(index, sourceNode);
                   }
                   removeNestingOnAvailLinks(sourceNode.get_nodes());
               }
           }

           function insertIndex(node, collection) {
               var index = collection.get_count();
               for (var i = 0; i < collection.get_count(); i++) {
                   if (node.get_text().toLowerCase() < collection.getNode(i).get_text().toLowerCase()) {
                       index = i;
                       break;
                   }
               }
               return index;
           }

           function isDroppedOn(treeView, destNode, target) {
               var wasDroppedOn = false;
               if (destNode && destNode.get_treeView().get_id() == treeView.get_id()) wasDroppedOn = true;
               if (target && target.id == treeView.get_id()) wasDroppedOn = true;
                   return wasDroppedOn;
           }
    </script>
    <asp:HiddenField id="hfLocation" runat="server"></asp:HiddenField>
    <asp:HiddenField id="hfSortOrder" runat="server"></asp:HiddenField>
    <asp:HiddenField id="hfImage" runat="server"></asp:HiddenField>
    <telerik:RadAjaxManager ID="RadAjaxManager" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="pnlTrees"></telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div style="padding: 3px 3px 16px 6px">
    <telerik:RadToolBar ID="radtbEditGroup" runat="server" Skin="Custom" EnableEmbeddedSkins="false"
        OnButtonClick="radtbEditGroup_ButtonClick" OnClientButtonClicking="onClientButtonClick">
        <Items>
            <telerik:RadToolBarButton Value="Save" Text="Save" SkinID="SaveBtn" CommandName="Save" ToolTip="Save Group" ValidationGroup="SaveValidation"></telerik:RadToolBarButton>
            <telerik:RadToolBarButton Value="Delete" Text="Delete" SkinID="DeleteBtn" CommandName="Delete" ToolTip="Delete Group"></telerik:RadToolBarButton>
        </Items>
    </telerik:RadToolBar>
    </div>
    <div class="GridBox GroupsWidth">
    <asp:Label ID="lblTitle" runat="server" Text="Group Title: " associatedcontrolid="txtTitle" CssClass="required"></asp:Label><asp:TextBox ID="txtTitle" runat="server" CssClass="width300"></asp:TextBox>
    <asp:HiddenField ID="hfTitle" runat="server"></asp:HiddenField>
    <div style="position:relative;width:570;float:right;left:-130px;top:-24px">
    - To add links,  drag and drop "Available Links" to the "Group Structure".
    <br />- To adjust link order, drag and drop the link name within the "Group Structure".<br />
    - To remove links,  drag and drop links from "Group Structure" to the "Available Links"<br />  
    </div><br />
    <asp:RequiredFieldValidator ID="rfvTitle" runat="server" ControlToValidate="txtTitle" ValidationGroup="SaveValidation" Display="Dynamic" ErrorMessage="Must enter a title" Text="Must enter a title" CssClass="indent58"></asp:RequiredFieldValidator>
    <br />
    <div style="position:relative;left:10px;">
    <asp:CheckBox ID="chkbxHideGroupTitle" runat="server" Text="Hide Group Title" CssClass="Help{93889096-186A-4b69-B98F-87A0822B457A}"></asp:CheckBox>
    <asp:HiddenField ID="hfHideGroupTitle" runat="server"></asp:HiddenField>
    <asp:CheckBox ID="chkbxShowIcons" runat="server" Text="Show icons with links" CssClass="Help{CD704BC5-5DA3-45fa-8B70-1AABAC3E0C69}"></asp:CheckBox>
    <asp:HiddenField ID="hfShowIcons" runat="server"></asp:HiddenField><br />
    </div>
    <asp:Panel ID="pnlTrees" runat="server" CssClass="GroupsWidth">


     <asp:Label ID="lblLinks" runat="server" Text="Available Links:" CssClass="LinksLabel"></asp:Label>
   <div class="boxshadow" style="width:350px;display:inline;float:left;">
            <div class="content">
                <div class="t"></div>
                <br />

   <telerik:RadTabStrip ID="rtsLinks" runat="server" SelectedIndex="0" MultiPageID="rmpLinks" width="334px" CssClass="StructureTree">
            <Tabs>
                <telerik:RadTab runat="server" Text="CoP Links"></telerik:RadTab>
                <telerik:RadTab runat="server" Text="Module Links"></telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="rmpLinks" runat="server" SelectedIndex="0">
            <telerik:RadPageView runat="server" ID="rpvCommunityLinks">
                <telerik:RadTreeView ID="rtvCommunityLinks" runat="server" ShowLineImages="true" EnableDragAndDrop="true" Height="320px"
                    EnableDragAndDropBetweenNodes="true" BorderWidth="1px" CssClass="StructureTree" Width="324px"
                    MultipleSelect="true" OnClientNodeDropping="onNodeDroppingFromAvailLinks"></telerik:RadTreeView>
            </telerik:RadPageView>
            <telerik:RadPageView runat="server" ID="rpvModuleLinks">
                <telerik:RadTreeView ID="rtvModuleLinks" runat="server" ShowLineImages="true" EnableDragAndDrop="true" Height="320px"
                    EnableDragAndDropBetweenNodes="true" BorderWidth="1px" CssClass="StructureTree" Width="324px"
                    MultipleSelect="true" OnClientNodeDropping="onNodeDroppingFromAvailLinks"></telerik:RadTreeView>
            </telerik:RadPageView>
        </telerik:RadMultiPage>
      </div>
            <div class="b"><div></div></div>
   </div>
   

    
    <asp:Label ID="lblStructure" runat="server" Text="Group Structure:" CssClass="indent280 LinksLabel"></asp:Label>

            <div class="gridboxshadow" style="width:605px;float:right;">
            <div class="content">

                <div class="t"></div>
                <br />
        <telerik:RadTreeView ID="rtvGroupLinks" runat="server" ShowLineImages="true" EnableDragAndDrop="true" Height="305px"
            EnableDragAndDropBetweenNodes="true" BorderWidth="1px" CssClass="StructureTree" Width="580"
            MultipleSelect="true" OnClientNodeDropping="onNodeDroppingFromGroupStruct"></telerik:RadTreeView>
          <telerik:RadToolBar ID="radtbUndo" runat="server" Skin="Custom" EnableEmbeddedSkins="false" CssClass="MT5"
                OnClientButtonClicking="onClientButtonClick">
                <Items>
                    <telerik:RadToolBarButton Value="Undo" Text="Undo" SkinID="UndoBtn" CommandName="Undo" ToolTip="Undo changes to Group Structure"></telerik:RadToolBarButton>
                </Items>
            </telerik:RadToolBar>      
                       </div>
            <div class="b"><div></div></div>
        </div>
      
        
    </asp:Panel>
     </div>
  <asp:ValidationSummary id="valSummary" runat="server" HeaderText="Errors:" DisplayMode="BulletList" validationgroup="validate" ShowMessageBox="True" ShowSummary="False"></asp:ValidationSummary>
</asp:Content>

Code Behind:

using System;
using System.Web.UI.WebControls;
using KN.Web.Links.Classes.Base;
using KN.Web.Links.GroupsManagerReference;
using KN.Web.Links.Presenters;
using KN.Web.Links.Views;
using Telerik.Web.UI;

namespace KN.Web.Links.Admin
{
    public partial class EditGroup : LinksAdminPage, IEditGroupView
    {
        #region Members
        private EditGroupPresenter mEditGroupPresenter;
        public event EventHandler Group_Save;
        public event EventHandler Group_Delete;
        #endregion

        #region Properties
        public RadTreeView ChildLinksTreeView
        {
            get { return rtvGroupLinks; }
        }

        public RadTreeView CommunityLinksTreeView
        {
            get { return rtvCommunityLinks; }
        }

        public RadTreeView ModuleLinksTreeView
        {
            get { return rtvModuleLinks; }
        }

        public RadToolBar ToolBar
        {
            get { return radtbEditGroup; }
        }

        public int CommunityID
        {
            get { return CoPID; }
        }

        public string Filter
        {
            get { return CoPFilter; }
        }

        public int GroupID
        {
            get { return getGroupID(); }
        }

        public string GroupTitle
        {
            get { return txtTitle.Text; }
            set
            {
                txtTitle.Text = value;
                hfTitle.Value = value;
            }
        }

        public bool ShowTitle
        {
            get { return !chkbxHideGroupTitle.Checked; }
            set
            {
                chkbxHideGroupTitle.Checked = !value;
                hfHideGroupTitle.Value = (!value).ToString().ToLower();
            }
        }

        public bool ShowIcons
        {
            get { return chkbxShowIcons.Checked; }
            set
            {
                chkbxShowIcons.Checked = value;
                hfShowIcons.Value = value.ToString().ToLower();
            }
        }

        public GroupLocation Location
        {
            get
            {
                if(string.IsNullOrEmpty(hfLocation.Value)) return GroupLocation.None;
                GroupLocation returnLocation;
                try
                {
                    returnLocation = (GroupLocation) Enum.Parse(typeof (GroupLocation), hfLocation.Value, true);
                }
                catch
                {
                    returnLocation = GroupLocation.None;
                }
                return returnLocation;
            }
            set { hfLocation.Value = value.ToString(); }
        }

        public int SortOrder
        {
            get { return string.IsNullOrEmpty(hfSortOrder.Value) ? 0 : Convert.ToInt32(hfSortOrder.Value); }
            set { hfSortOrder.Value = value.ToString(); }
        }

        public string Image
        {
            get { return string.IsNullOrEmpty(hfImage.Value) ? "" : hfImage.Value; }
            set { hfImage.Value = value; }
        }
        #endregion

        #region Constructors
        public EditGroup()
        {
            mEditGroupPresenter = new EditGroupPresenter(this);
        }
        #endregion

        #region Control Methods
        protected void Page_Init(object sender, EventArgs e)
        {
            Page.Title = GroupID > 0 ? "Edit Group" : "Add Group";
        }

        protected void radtbEditGroup_ButtonClick(object sender, RadToolBarEventArgs e)
        {
            switch (e.Item.Value)
            {
                case "Save":
                    if (Group_Save != null)
                        Group_Save(sender, e);
                    break;
                case "Delete":
                    if(Group_Delete !=null)
                        Group_Delete(sender, e);
                    break;
                default:
                    break;
            }
        }
        #endregion

        private int getGroupID()
        {
            var groupIDFromQS = Request.QueryString["GroupID"];

            int groupID;
            if(Int32.TryParse(groupIDFromQS, out groupID))
                if(groupID > 0)
                    return groupID;

            return 0;
        }

        public void Redirect(string uri)
        {
            Response.Redirect(uri);
        }
    }
}

[Keith]

Yana,

I did a little testing with one of the examples in the Telerik help and I am able to produce the same unwanted drag and drop behavior.

Here's the code from the help example:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TreeDragDrop.aspx.cs" Inherits="TreeDragDrop_TreeDragDrop" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
<telerik:RadTreeView ID="RadTreeView1" runat="server" EnableDragAndDrop="true" OnNodeDrop="RadTreeView1_NodeDrop"
   Skin="Office2007" BorderWidth="1px" >
   <Nodes>
       <telerik:RadTreeNode runat="server" Text="Root RadTreeNode1" ExpandMode="ClientSide">
           <Nodes>
               <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1" ExpandMode="ClientSide">
                   <Nodes>
                       <telerik:RadTreeNode runat="server" ExpandMode="ClientSide" Text="child 1 a">
                       </telerik:RadTreeNode>
                       <telerik:RadTreeNode runat="server" ExpandMode="ClientSide" Text="child 1 b">
                       </telerik:RadTreeNode>
                       <telerik:RadTreeNode runat="server" ExpandMode="ClientSide" Text="child 1 c">
                           <Nodes>
                               <telerik:RadTreeNode runat="server" ExpandMode="ClientSide" Text="child 1 c 1">
                               </telerik:RadTreeNode>
                           </Nodes>
                       </telerik:RadTreeNode>
                   </Nodes>
               </telerik:RadTreeNode>
           </Nodes>
       </telerik:RadTreeNode>
       <telerik:RadTreeNode runat="server" Text="Root RadTreeNode2" ExpandMode="ClientSide">
       </telerik:RadTreeNode>
       <telerik:RadTreeNode runat="server" Text="Root RadTreeNode3" ExpandMode="ClientSide">
       </telerik:RadTreeNode>
   </Nodes>
</telerik:RadTreeView>
<br />
<telerik:RadTreeView ID="RadTreeView2" runat="server" EnableDragAndDrop="true" OnNodeDrop="RadTreeView1_NodeDrop"
   Skin="Office2007" BorderWidth="1px" Height="150px" >
<Nodes>
       <telerik:RadTreeNode runat="server" ExpandMode="ClientSide" Text="Tree 2 Node 1">
       </telerik:RadTreeNode>
       <telerik:RadTreeNode runat="server" ExpandMode="ClientSide" Text="Tree 2 Node 2">
       </telerik:RadTreeNode>
       <telerik:RadTreeNode runat="server" ExpandMode="ClientSide" Text="Tree 2 Node 3">
       </telerik:RadTreeNode>
   </Nodes>


</telerik:RadTreeView>
    </form>
</body>
</html>

Code Behind:

using System.Web.UI;
using Telerik.Web.UI;

    public partial class TreeDragDrop_TreeDragDrop : System.Web.UI.Page
    {
        protected void RadTreeView1_NodeDrop(object sender, Telerik.Web.UI.RadTreeNodeDragDropEventArgs e)
        {
            foreach (RadTreeNode node in e.DraggedNodes)
            {
                e.DestDragNode.Nodes.Add(node);
            }
        }
    }

The drag and drop works as expected when there are nodes in "RadTreeView2" and there is a UL in the rendering. Dragging and dropping so that the target is the UL is not easy to do, so the behavior is not obvious.

However, if you make "RadTreeView2" and empty tree

i.e.

<telerik:RadTreeView ID="RadTreeView2" runat="server" EnableDragAndDrop="true" OnNodeDrop="RadTreeView1_NodeDrop"
   Skin="Office2007" BorderWidth="1px" Height="150px" >


</telerik:RadTreeView>

then, the UL is an easy target and dropping on it does nothing; which at minimum confuses the user. They get different behavior depending on where they drop to on an empty tree. Since this is the default state in our implementation, we get a lot of help desk calls about why drag and drop does not work. The users seem to want to drag and drop to the top portion of the empty tree; which is where the invisible UL is located, and nothing happens

So need a fix.

Keith E.

[Yana]

Hello Keith,

Please modify your OnNodeDrop event handler in order to handle the situation when the destination node is empty:

protected void RadTreeView1_NodeDrop(object sender, RadTreeNodeDragDropEventArgs e)
{
    if (e.DestDragNode == null && e.HtmlElementID == "RadTreeView2")
    {
        foreach (RadTreeNode node in e.DraggedNodes)
        {
            RadTreeView2.Nodes.Add(node);
        }
    }
    else
    {

        foreach (RadTreeNode node in e.DraggedNodes)
        {
            e.DestDragNode.Nodes.Add(node);
        }
    }
}

Greetings,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Keith]

Yana,

The code you recommend does correct an error message produced in the help example, when the drop occurs on an empty tree and the drop is over an area of the tree that does not have the UL indicated by the green line on the attached screen shot.

However, it does not correct the unwanted behavior of my original post and that is, if you drop to the UL inside the empty tree; which is at the top of the empty tree (refer to the outlined blue area in the attached screen shot), the drag and drop indicated by the red line does nothing.

So, I still need a fix for this issue.

Thanks in advance,

Keith

[Keith]

Not sure the attached image made it. So, here's another attempt.

[Yana]

Hello Keith,

This can be fixed only client-side, just subscribe to OnClientNodeDropping event and in its handler:

<script type="text/javascript">
    function nodeDropping(sender, args) {
        var treeview2 = $find("<%=RadTreeView2.ClientID %>");
        if (args.get_htmlElement().className.indexOf("rtUL") > -1) {
            treeview2.trackChanges();
            treeview2.get_nodes().add(args.get_sourceNode());
            treeview2.commitChanges();
        }
    }
</script>

All the best,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.