Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

TreeView / Drag-and-drop

Example Configuration
  • Drag & drop options:
RadTreeView1
  • Personal Folders
    • Deleted Items (6)
    • Drafts
    • Inbox (14)
      • Invoices
    • Junk E-mail
    • Outbox
    • Sent Items
    • Search Folders
      • Form Follow Up
      • Large Mail
      • Unread Mail
RadTreeView2
  • Personal Folders
    • Deleted Items (6)
    • Drafts
    • Inbox (14)
      • Invoices
    • Junk E-mail
    • Outbox
    • Sent Items
    • Search Folders
      • Form Follow Up
      • Large Mail
      • Unread Mail
TextBox
RadGrid
TextValueCategory
OneTwoThree
OneTwoThree
OneTwoThree

  • RadTreeView supports drag-and-drop functionality for tree-nodes. To enable this mode you need to mark the instance of RadTreeView with EnableDragAndDrop="True" and you will be able to drag and drop TreeNodes.

    RadTreeView  also supports drag-and-drop functionality for multiple tree-nodes. You can select multiple treenodes by setting 
    MultipleSelect="True".

    When RadTreeView detects a valid drag-and-drop operation (the selected node is dropped onto another node) it generates a NodeDrop server-side event. The event handler for NodeDrop can then perform specific action, by fetching both the source and destination drag/drop nodes.

    This example performs drag and drop functionality in all of the following ways:
    - drag and drop between nodes
    - drag and drop between trees
    - drag and drop to HTML elements

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" AutoEventWireup="true" Inherits="Telerik.Web.Examples.TreeView.DragAndDropNodes.DefaultVB" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <qsf:HeadTag runat="server" ID="Headtag1"></qsf:HeadTag>
        <style type="text/css">
        span.label
        {
            color: #4888A3;
            padding: 4px 4px;
            display: block;
            margin-bottom: 7px;
            border-bottom: 1px solid #cccccc;
        }
        
        #ConfigurationPanel1 ul
        {
            list-style:none;
            margin:0;
            padding:0;
            float:left;
        }
        
        #ConfigurationPanel1 li
        {
            float:left;
            padding: 0 10px;
            border-left: solid 1px #b1d8eb;
            line-height: 24px;
        }
        #ConfigurationPanel1 li input,
        #ConfigurationPanel1 li label,
        #ConfigurationPanel1 li span
        {
            vertical-align:middle;
        }
        </style>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
            <qsf:Header runat="server" ID="Header1" NavigationLanguage="VB"></qsf:Header>
            <telerik:RadScriptManager runat="server" ID="RadScriptManager1">
            </telerik:RadScriptManager>
            <telerik:RadScriptBlock runat="Server" ID="RadScriptBlock1">

                <script type="text/javascript">        
                    /* <![CDATA[ */                                    
                    var gridId = "<%= RadGrid1.ClientID %>";
                    function isMouseOverGrid(target)
                    {
                        parentNode = target;
                        while (parentNode != null)
                        {                    
                            if (parentNode.id == gridId)
                            {
                                return parentNode;
                            }
                            parentNode = parentNode.parentNode;
                        }
            
                        return null;
                    }
            
                    function onNodeDragging(sender, args)
                    {
                        var target = args.get_htmlElement();    
                        
                        if(!target) return;
                        
                        if (target.tagName == "INPUT")
                        {        
                            target.style.cursor = "hand";
                        }

                        var grid = isMouseOverGrid(target)
                        if (grid)
                        {
                            grid.style.cursor = "hand";
                        }
                    }
            
                    function dropOnHtmlElement(args)
                    {                    
                     if(droppedOnInput(args))
                     return;
                    
                     if(droppedOnGrid(args))
                     return;                    
                    }
                    
                    function droppedOnGrid(args)
                    {
                     var target = args.get_htmlElement();
                    
                     while(target)
                     {
                     if(target.id == gridId)
                     {
                     args.set_htmlElement(target);
                     return;                                                  
                     }
                    
                     target = target.parentNode;
                     }
                     args.set_cancel(true);
                    }
                    
                    function droppedOnInput(args)
                    {
                     var target = args.get_htmlElement();
                        if (target.tagName == "INPUT")
                        {
                            target.style.cursor = "default";
                            target.value = args.get_sourceNode().get_text();        
                            args.set_cancel(true);
                            return true;
                        }                         
                    }
            
                    function dropOnTree(args)
                    {
                        var text = "";

                        if(args.get_sourceNodes().length)
                        {    
                            var i;
                            for(i=0; i < args.get_sourceNodes().length; i++)
                            {
                                var node = args.get_sourceNodes()[i];
                                text = text + ', ' +node.get_text();
                            }
                        }
                    }
                    
                    function clientSideEdit(sender, args)
                    {
                     var destinationNode = args.get_destNode();                                 
                    
                     if(destinationNode)
                     {            
                     var firstTreeView = $find('RadTreeView1');
                     var secondTreeView = $find('RadTreeView2');
                    
                            firstTreeView.trackChanges();
                            secondTreeView.trackChanges();
                            var sourceNodes = args.get_sourceNodes();
                     for (var i = 0; i < sourceNodes.length; i++)
                     {
                                var sourceNode = sourceNodes[i];
                                sourceNode.get_parent().get_nodes().remove(sourceNode);                
                                
                                if(args.get_dropPosition() == "over") destinationNode.get_nodes().add(sourceNode);                                                        
                                if(args.get_dropPosition() == "above")     insertBefore(destinationNode, sourceNode);
                                if(args.get_dropPosition() == "below")     insertAfter(destinationNode, sourceNode);
                     }
                     destinationNode.set_expanded(true);
                     firstTreeView.commitChanges();
                     secondTreeView.commitChanges();
                     }
                    }
                    
                    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 onNodeDropping(sender, args)
                    {            
                     var dest = args.get_destNode();
                        if (dest)
                        {
                         var clientSide = document.getElementById('ChbClientSide').checked;
        
                     if(clientSide)
                     {
                     clientSideEdit(sender, args);                
                     args.set_cancel(true);
                     return;
                     }
                        
                            dropOnTree(args);
                        }
                        else
                        {
                            dropOnHtmlElement(args);
                        }
                    }
            /* ]]> */
                </script>

            </telerik:RadScriptBlock>
            <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="Panel1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" />
            <asp:Panel runat="server" ID="Panel1">
                <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Expanded="true">
                    <ul>
                        <li style="border-left: none"><span class="title">Drag &amp; drop options:</span>
                            <asp:CheckBox ID="ChbClientSide" runat="server" Checked="true" Text="Client-side drag &amp;amp; drop" /></li>
                        <li>
    <asp:CheckBox ID="ChbMultipleSelect" runat="server" Text="Multiple node selection" Checked="true"
    AutoPostBack="True" OnCheckedChanged="ChbMultipleSelect_CheckedChanged"></asp:CheckBox></li>
                        <li>
    <asp:CheckBox ID="ChbBetweenNodes" runat="server" Text="Drag and drop between nodes" Checked="true"
    AutoPostBack="True" OnCheckedChanged="ChbBetweenNodes_CheckedChanged"></asp:CheckBox></li>
                    </ul>
                </qsf:ConfiguratorPanel>
                <div style="background: url(Img/bg.gif) no-repeat; padding: 115px 0px 0px 15px;">
                    <div style="width: 180px; float: left;">
                        <span class="label">RadTreeView1</span>
                        <telerik:RadTreeView ID="RadTreeView1" runat="server" EnableDragAndDrop="True" OnNodeDrop="RadTreeView1_HandleDrop"
                            OnClientNodeDropping="onNodeDropping" OnClientNodeDragging="onNodeDragging" MultipleSelect="true" EnableDragAndDropBetweenNodes="true">
                        </telerik:RadTreeView>
                    </div>
                    <div style="width: 180px; float: left;">
                        <span class="label">RadTreeView2</span>
                        <telerik:RadTreeView ID="RadTreeView2" runat="server" EnableDragAndDrop="True" OnNodeDrop="RadTreeView1_HandleDrop"
                            OnClientNodeDropping="onNodeDropping" OnClientNodeDragging="onNodeDragging" MultipleSelect="true" EnableDragAndDropBetweenNodes="true">
                        </telerik:RadTreeView>
                    </div>
                    <div style="width: 110px; float: left">
                        <span class="label">TextBox</span>
                        <asp:TextBox runat="server" ID="NodeText" Style="width: 82px;"></asp:TextBox>
                    </div>
                    <div style="float: left">
                        <span class="label">RadGrid</span>
                        <telerik:RadGrid runat="server" ID="RadGrid1" Width="220px">
                        </telerik:RadGrid>
                        <asp:Label CssClass="textr" runat="server" ID="Label1"></asp:Label>
                    </div>
                    <div style="clear: both">
                    </div>
                </div>
            </asp:Panel>
            <qsf:Footer runat="server" ID="Footer1"></qsf:Footer>
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451