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
    • DefaultVB.aspx
    • DefaultVB.aspx.vb
    • scripts.js
    • styles.css
    <%@ Page Language="VB" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="ListBox.Examples.ApplicationScenarios.TreeViewDragAndDrop.DefaultVB" %>
     
    <!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