TreeList - 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
Veola R Smith
352-326-5825
Leesburg, FL 32749 2479 Rhapsody Street
  
Mary L Tarkington
716-565-7221
Williamsville, NY 14221 3052 Nuzum Court
Hannah S Pugh
501-222-6942
Little Rock, AR 72211 3306 Clinton Street
 
Susan S Thompson
701-273-3202
Pettibone, ND 58475 1619 Catherine Drive
  
Gloria L Miller
318-272-6552
Shreveport, LA 71101 3672 Roguski Road
   
Selina J Wong
586-756-3821
Center Line, MI 48015 720 Ritter Avenue
Target
Ken J Sánchez
697-555-0142
Newport Hills 4350 Minute Dr.
 
David M Bradley
913-555-0172
Redmond 3768 Door Way
   
Kevin F Brown
150-555-0189
Everett 7883 Missing Canyon Court
  
Sariya E Harnpadoungsataya
399-555-0176
Everett 1185 Dallas Drive
   
Mary E Gibson
531-555-0183
Everett 3928 San Francisco
   
Terry J Eminhizer
138-555-0118
Bellevue 8668 Via Neruda

Demo Configurator

Select this checkbox to toggle between copy/move mode.
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.TreeListExamplesCSharp.ItemsDragDrop.DefaultCS"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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 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

Help Us Improve

Was this example helpful?