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

Drag-and-drop

Move operation is supported only when dragged item is expanded. If it is not, the code will fallback to (non-recursive) copy operation.
Source
Alice Shah
812-447-9918
Columbus, IN 47201 2322 Lucy Lane
  
Usaim Nabeel Said
917-893-3384
Manhattan, NY 10016 4251 Hoffman Avenue
 
Irena Spurná
610-604-2578
Springfield, PA 19064 407 Jody Road
  
Neil L Obryant
585-425-2711
Fairport, NY 14450 4428 Walt Nuzum Farm Road
  
Marysa S Brandt
405-687-3550
Clinton, OK 73601 2772 Hott Street
 
Frans A Lauritsen
320-556-2959
Saint Cloud, MN 56303 3145 Brighton Circle Road
Target
Ken J Sánchez
697-555-0142
Newport Hills 4350 Minute Dr.
 
Kevin F Brown
150-555-0189
Everett 7883 Missing Canyon Court
  
Janaina Barreiro Gambaro Bueno
623-555-0155
Issaquah 5979 El Pueblo
  
Randy L Delgado
505-343-0648
Albuquerque, NM 87107 2090 Reel Avenue
  
Isabel Burke
510-615-1721
Oakland, CA 94621 3437 Clifford Street
  
Isabel Burke
510-615-1721
Oakland, CA 94621 3437 Clifford Street
  • Demo Configurator
Select this checkbox to toggle between copy/move mode.

You can drag items from left to right but not vice versa. Depending on the 'Move dragged items' checkbox selection, the items will be either copied or moved to the target control. Both RadTreeLists support item reordering.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
  • styles.css
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.TreeListExamplesVBNET.ItemsDragDrop.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" />
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <qsf:MessageBox ID="IDBox1" Icon="Info" runat="server" >
        Move operation is supported only when dragged item is expanded. If it is not,
        the code will fallback to (non-recursive) copy operation.
    </qsf:MessageBox>
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTreeList1" />
                    <telerik:AjaxUpdatedControl ControlID="RadTreeList2" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadTreeList1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTreeList1" />
                    <telerik:AjaxUpdatedControl ControlID="RadTreeList2" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadTreeList2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTreeList1" />
                    <telerik:AjaxUpdatedControl ControlID="RadTreeList2" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
    <div class="demo-container">
        <div class="left">
            <telerik:RadTreeList RenderMode="Lightweight" ID="RadTreeList1" runat="server" AllowPaging="True" DataSourceID="SqlDataSource1" DataKeyNames="EmployeeID" ParentDataKeyNames="ParentEmployeeID" AutoGenerateColumns="false" AllowRecursiveDelete="true" Width="500px" PageSize="6" OnItemCommand="RadTreeList1_ItemCommand">
                <PagerStyle Mode="NumericPages"></PagerStyle>
                <Columns>
                    <telerik:TreeListDragDropColumn Visible="false" HeaderStyle-Width="20px" UniqueName="TreeListDragDropColumn"></telerik:TreeListDragDropColumn>
                    <telerik:TreeListTemplateColumn HeaderText="Source" DataField="FirstName">
                        <ItemTemplate>
                            <table class="templateTable">
                                <tr>
                                    <td class="templateHeader">
                                        <asp:Label ID="lblFirstName" runat="server" Text='<%# Bind("FirstName") %>'></asp:Label>
                                        <asp:Label ID="lblMiddleName" runat="server" Text='<%# Bind("MiddleName") %>'></asp:Label>
                                        <asp:Label ID="lblLastName" runat="server" Text='<%# Bind("LastName") %>'></asp:Label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Label ID="lblPhone" runat="Server" Text='<%# Bind("Phone") %>'></asp:Label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Label ID="lblCity" runat="server" Text='<%# Bind("City") %>'></asp:Label>
                                        <asp:Label ID="lblAddress" runat="server" Text='<%# Bind("Address") %>'></asp:Label>
                                    </td>
                                </tr>
                            </table>
                        </ItemTemplate>
                    </telerik:TreeListTemplateColumn>
                </Columns>
                <ClientSettings AllowItemsDragDrop="true">
                    <Selecting AllowItemSelection="True"></Selecting>
                    <ClientEvents OnItemDropping="itemDropping" OnItemDragging="itemDragging" OnTreeListCreated="function(sender) { treeList1 = sender; }"></ClientEvents>
                </ClientSettings>
            </telerik:RadTreeList>
        </div>
        <div class="right">
            <telerik:RadTreeList RenderMode="Lightweight" ID="RadTreeList2" runat="server" AllowPaging="True" DataSourceID="SqlDataSource2" DataKeyNames="EmployeeID" ParentDataKeyNames="ManagerID" AutoGenerateColumns="false" ClientDataKeyNames="EmployeeID" PageSize="6" Width="500px">
                <PagerStyle Mode="NumericPages"></PagerStyle>
                <Columns>
                    <telerik:TreeListDragDropColumn Visible="false" HeaderStyle-Width="20px" UniqueName="TreeListDragDropColumn"></telerik:TreeListDragDropColumn>
                    <telerik:TreeListTemplateColumn HeaderText="Target">
                        <ItemTemplate>
                            <table id="Table1" class="templateTable" runat="server">
                                <tr>
                                    <td class="templateHeader">
                                        <asp:Label ID="lblFirstName" runat="server" Text='<%# Bind("FirstName") %>'></asp:Label>
                                        <asp:Label ID="lblMiddleName" runat="server" Text='<%# Bind("MiddleName") %>'></asp:Label>
                                        <asp:Label ID="lblLastName" runat="server" Text='<%# Bind("LastName") %>'></asp:Label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Label ID="lblPhone" runat="Server" Text='<%# Bind("Phone") %>'></asp:Label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Label ID="lblCity" runat="server" Text='<%# Bind("City") %>'></asp:Label>
                                        <asp:Label ID="lblAddress" runat="server" Text='<%# Bind("Address") %>'></asp:Label>
                                    </td>
                                </tr>
                            </table>
                        </ItemTemplate>
                    </telerik:TreeListTemplateColumn>
                </Columns>
                <ClientSettings AllowItemsDragDrop="true">
                    <Selecting AllowItemSelection="True"></Selecting>
                    <ClientEvents OnItemDropping="itemDropping" OnItemDragging="itemDragging" OnTreeListCreated="function(sender) { treeList2 = sender; }"></ClientEvents>
                </ClientSettings>
            </telerik:RadTreeList>
        </div>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:SelfReferencingDbConnectionString %>" SelectCommand="SELECT [EmployeeID], [ParentEmployeeID], [FirstName], [MiddleName], [LastName], [Phone], [Address], [City] FROM [TelerikEmployees]" DeleteCommand="DELETE FROM [TelerikEmployees] WHERE [EmployeeID] = @EmployeeID" InsertCommand="INSERT INTO [TelerikEmployees] ([ParentEmployeeID]) VALUES (@ParentEmployeeID)" UpdateCommand="UPDATE [TelerikEmployees] SET [ParentEmployeeID] = @ParentEmployeeID WHERE [EmployeeID] = @EmployeeID">
        <DeleteParameters>
            <asp:Parameter Name="EmployeeID" Type="Int32"></asp:Parameter>
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="ParentEmployeeID" Type="Int32"></asp:Parameter>
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="ParentEmployeeID" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="EmployeeID" Type="Int32"></asp:Parameter>
        </UpdateParameters>
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:SelfReferencingDbConnectionString %>" SelectCommand="SELECT [EmployeeID], [FirstName], [MiddleName], [LastName], [ManagerID], [Address], [City], [Phone] FROM [EmployeesNew]" DeleteCommand="DELETE FROM [EmployeesNew] WHERE [EmployeeID] = @EmployeeID" InsertCommand="INSERT INTO [EmployeesNew] ([ManagerID]) VALUES (@ManagerID)" UpdateCommand="UPDATE [EmployeesNew] SET [ManagerID] = @ManagerID WHERE [EmployeeID] = @EmployeeID">
        <DeleteParameters>
            <asp:Parameter Name="EmployeeID" Type="Int32"></asp:Parameter>
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="ManagerID" Type="Int32"></asp:Parameter>
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="ManagerID" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="EmployeeID" Type="Int32"></asp:Parameter>
        </UpdateParameters>
    </asp:SqlDataSource>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Demo Configurator">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Select this checkbox to toggle between copy/move mode.">
                    <ul class="fb-group">
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox AutoPostBack="true" runat="server" ID="MoveItemsCheckBox" Text="Move dragged items"></asp:CheckBox>
                            </span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox AutoPostBack="true" runat="server" ID="ShowDragColumnCheckBox" Text="Show DragDrop Column" OnCheckedChanged="ShowDragColumnCheckBox_CheckedChanged"></asp:CheckBox>
                            </span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance