New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

    Drag-and-drop

    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
    • Demo Configurator
    • Drag and drop options:

    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

    • DefaultVB.aspx
    • DefaultVB.aspx.vb
    • scripts.js
    • Styles.css
    • treeView.xml
    <%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" AutoEventWireup="true" Inherits="TreeView.Examples.Functionality.DragAndDropNodes.DefaultVB" %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <!DOCTYPE html>
    <html xmlns='http://www.w3.org/1999/xhtml'>
    <head runat="server">
        <title>Telerik ASP.NET Example</title>
        <link href="styles.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
        <div class="demo-container">
            <telerik:RadScriptBlock runat="Server" ID="RadScriptBlock1">
                <script type="text/javascript" src="scripts.js"></script>
                <script type="text/javascript">
                    /* <![CDATA[ */
                    Sys.Application.add_load(function () {
                        demo.grid = $find("<%= RadGrid1.ClientID %>");
                        demo.firstTreeView = $find('<%= RadTreeView1.ClientID %>');
                        demo.secondTreeView = $find('<%= RadTreeView2.ClientID %>');
                        demo.checkbox = document.getElementById('<%= ChbClientSide.ClientID %>');
                    });
                    /* ]]> */
                </script>
            </telerik:RadScriptBlock>
            <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="Panel1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Silk">
            </telerik:RadAjaxLoadingPanel>
            <asp:Panel runat="server" ID="Panel1" CssClass="Panel1">
                <div class="wrapper treeViewWrapper">
                    <span class="label">RadTreeView1</span>
                    <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView1" runat="server"  EnableDragAndDrop="True"
                        OnNodeDrop="RadTreeView1_HandleDrop" OnClientNodeDropping="onNodeDropping" OnClientNodeDragging="onNodeDragging"
                        MultipleSelect="true" EnableDragAndDropBetweenNodes="true">
                    </telerik:RadTreeView>
                </div>
                <div class="wrapper treeViewWrapper">
                    <span class="label">RadTreeView2</span>
                    <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView2" runat="server"  EnableDragAndDrop="True"
                        OnNodeDrop="RadTreeView1_HandleDrop" OnClientNodeDropping="onNodeDropping" OnClientNodeDragging="onNodeDragging"
                        MultipleSelect="true" EnableDragAndDropBetweenNodes="true">
                    </telerik:RadTreeView>
                </div>
                <div class="wrapper textBoxWrapper">
                    <span class="label">TextBox</span>
                    <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="NodeText"  Width="130px"></telerik:RadTextBox>
                </div>
                <div class="wrapper" style="float: left">
                    <span class="label">RadGrid</span>
                    <telerik:RadGrid RenderMode="Lightweight" runat="server" ID="RadGrid1"  Width="220px">
                    </telerik:RadGrid>
                    <asp:Label CssClass="textr" runat="server" ID="Label1"></asp:Label>
                </div>
                <div style="clear: both">
                </div>
            </asp:Panel>
        </div>
     
        <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Demo Configurator">
            <Views>
                <qsf:View Title="Drag and drop options:">
                    <asp:CheckBox ID="ChbClientSide" runat="server" Checked="true" Text="Client-side drag &amp;amp; drop"></asp:CheckBox>
     
                    <asp:CheckBox ID="ChbMultipleSelect" runat="server" Text="Multiple node selection"
                        Checked="True" AutoPostBack="True" OnCheckedChanged="ChbMultipleSelect_CheckedChanged"></asp:CheckBox>
     
                    <asp:CheckBox ID="ChbBetweenNodes" runat="server" Text="Drag and drop between nodes" Checked="True"
                        AutoPostBack="True" OnCheckedChanged="ChbBetweenNodes_CheckedChanged"></asp:CheckBox>
     
                </qsf:View>
            </Views>
        </qsf:ConfiguratorPanel>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance