All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
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
<%@ 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; 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>