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

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • Styles.css
  • treeView.xml
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="TreeView.Examples.Functionality.DragAndDropNodes.DefaultCS" %>

<%@ 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">
                <h3>RadTreeView1</h3>
                <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">
                <h3>RadTreeView2</h3>
                <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">
                <h3>TextBox</h3>
                <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="NodeText"  Width="130px"></telerik:RadTextBox>
            </div>
            <div class="wrapper" style="float: left">
                <h3>RadGrid</h3>
                <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