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

Drag-and-drop with RadTreeView

  • Birthday present
  • New tennis racket
  • Water the plants
  • High priority
    • Fill tax papers
  • Normal priority
    • Wash the car
  • Low priority
    • Paintball with friends

This example demonstrates how to drag and drop items from RadListBox to RadTreeView and vice versa.

  • Drag an item from RadListBox and drop it on any tree node
  • Drag and drop items within RadListBox
  • Drag a tree node from RadTreeView and drop it on any listbox item
  • Drag and drop nodes within RadTreeView
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ListBox.Examples.ApplicationScenarios.TreeViewDragAndDrop.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <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" />

    <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
        <script type="text/javascript">
            //<![CDATA[
            Sys.Application.add_load(function() {
                demo.ListBoxID = "<%= RadListBox1.ClientID%>";
                demo.TreeViewID = "<%=RadTreeView1.ClientID %>";
                demo.initialize();
            });
            //]]>
        </script>
    </telerik:RadCodeBlock>

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
    </telerik:RadAjaxLoadingPanel>

    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadListBox1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadListBox1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadTreeView1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadTreeView1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadListBox1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadTreeView1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <div class="demo-container">
        <telerik:RadListBox RenderMode="Lightweight" runat="server" ID="RadListBox1" EnableDragAndDrop="True" AllowReorder="true"
            Height="200px" OnClientDropping="onListBoxDropping" OnClientDragStart="onListBoxDragStart"
            OnClientMouseOver="onListBoxMouseOver" OnClientMouseOut="onListBoxMouseOut" OnClientDragging="onListBoxDragging"
            OnDropped="RadListBox1_ItemDropped" Skin="Office2010Blue">
            <ButtonSettings ShowReorder="false"></ButtonSettings>
            <Items>
                <telerik:RadListBoxItem Text="Birthday present"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="New tennis racket"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Water the plants"></telerik:RadListBoxItem>
            </Items>
        </telerik:RadListBox>
        <telerik:RadTreeView RenderMode="Lightweight" runat="server" ID="RadTreeView1" EnableDragAndDrop="True" OnClientMouseOver="onTreeViewMouseOver"
            OnClientMouseOut="onTreeViewMouseOut" OnClientNodeDragStart="onTreeViewDragStart"
            OnClientNodeDropping="onTreeViewDropping" OnNodeDrop="RadTreeView1_NodeDrop"
            OnClientNodeDragging="onTreeViewDragging" Skin="Office2010Blue">
            <Nodes>
                <telerik:RadTreeNode Text="High priority" AllowDrag="false" Expanded="True" ImageUrl="images/high.png">
                    <Nodes>
                        <telerik:RadTreeNode Text="Fill tax papers" />
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Normal priority" AllowDrag="false" Expanded="True" ImageUrl="images/normal.png">
                    <Nodes>
                        <telerik:RadTreeNode Text="Wash the car" />
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Low priority" AllowDrag="false" Expanded="True" ImageUrl="images/low.png">
                    <Nodes>
                        <telerik:RadTreeNode Text="Paintball with friends" />
                    </Nodes>
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeView>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance