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
Maslin Gadbois
815-783-5038
Chicago, IL 60654 2796 Arthur Avenue
  
Maurice Boileau
515-539-0961
Kamrar, IA 50132 509 Nutters Barn Lane
 
Nayme Alcaraz Sánchez
812-788-1816
Bloomington, IN 47408 2366 Stratford Park
  
Maik Peters
906-221-3665
Marquette, MI 49855 2238 Railroad Street
 
Thelma Bárudóttir
423-451-1485
Soddy Daisy, TN 37403 3818 Corbin Branch Road
 
Chiemela Uwakwe
505-256-8462
Albuquerque, NM 87108 2293 Byrd Lane
Target
Ken J Sánchez
697-555-0142
Newport Hills 4350 Minute Dr.
 
Kevin F Brown
150-555-0189
Everett 7883 Missing Canyon Court
  
Isabel Burke
510-615-1721
Oakland, CA 94621 3437 Clifford Street
  
Usaim Nabeel Said
917-893-3384
Manhattan, NY 10016 4251 Hoffman Avenue
  
Joe Palmer
313-576-8085
Detroit, MI 48201 2571 Woodbridge Lane
  
Usaim Nabeel Said
917-893-3384
Manhattan, NY 10016 4251 Hoffman Avenue
  • 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