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

WebForms TreeView Overview

Starski & Sons Travel Agency

Drag a package from Travel Packages to Favorites to create your wishtree.

  • Island
    • Zanzibar
    • Mauritius
    • Maldives
      • Weekend Package
      • 1 Week Package
      • 2 Week Package
  • Island
    • Zanzibar
    • Mauritius
    • Maldives
ItemPrice
Subtotal (0 items):$0
Drag and drop packages here...
Price Checker
Drop a package here to check price

About RadTreeView for ASP.NET AJAX

RadTreeView is the supercharged treeview component for ASP.NET, combining highly-efficient rendering and AJAX Load on Demand support for superior performance. Added to this are SEO compliance, full drag-and-drop capabilities, and nearly codeless development experience.

Imagine the bulk of rendered HTML output generated by a treeview populating thousands of nodes. Now picture the performance issues that may arise from all of this HTML. Well, the Telerik TreeView control for ASP.NET AJAX rises to the challenge with its efficient semantic rendering and web service load-on-demand, resulting in highly optimized HTML and lightning fast page loading. Rich user interactivity is supported right out of the box, including: node drag-and-drop, node editing, and node context treeviews.

RadTreeView and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Semantic rendering for minimal HTML markup
  • Powerful databinding
  • Rich client-side API providing the ability to add/delete nodes at the client-side
  • Enhanced Drag & Drop Behavior
  • AJAX-based load on demand
  • XHTML and Accessibility standards compliancy
  • Search Engine Friendly
  • Extensive design-time support
  • Built-in Context treeviews
  • Expand Animations
  • Skinned Appearance
  • Custom Attributes
  • Template Support
  • Right to left support
  • Multiple node selection
  • Check box support

More about RadTreeView for ASP.NET AJAX
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TreeView.Examples.Overview.DefaultCS"Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script type="text/javascript" src="scripts.js"></script>
    <telerik:RadCodeBlock runat="Server" ID="RadCodeBlock1">
        <script type="text/javascript">
            //<![CDATA[
            Sys.Application.add_load(function() {
                demo.priceCheckerID = "<%= priceChecker.ClientID%>";
                demo.gridID = "<%=RadGrid1.ClientID %>";
                demo.initialize();
            });
            //]]>
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadTreeView1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTreeView1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTreeView2"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="priceChecker"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadTreeView2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTreeView1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTreeView2"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="priceChecker"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container no-bg size-wide">
        <img class="header" src="images/top.jpg" alt="Starski &amp; Sons Travel Agency" />
        <div class="demo-content" >
            <p class="main-description">Drag a package from Travel Packages to Favorites to create your wishtree.</p>
            <div class="treeViewWrapper">
                <telerik:RadTreeView RenderMode="Lightweight" runat="Server" ID="RadTreeView1" EnableDragAndDrop="true" OnNodeDrop="RadTreeView1_NodeDrop"
                    OnClientNodeDropping="onDropping" EnableDragAndDropBetweenNodes="false" Skin="Vista" >
                    <Nodes>
                        <telerik:RadTreeNode runat="server" Text="Island" Expanded="true" AllowDrag="false"
                            AllowDrop="false">
                            <Nodes>
                                <telerik:RadTreeNode runat="server" Text="Zanzibar" AllowDrag="false">
                                    <Nodes>
                                        <telerik:RadTreeNode runat="server" Text="Weekend Package" AllowDrop="false" Value="1999">
                                        </telerik:RadTreeNode>
                                        <telerik:RadTreeNode runat="server" Text="1 Week Package" AllowDrop="false" Value="2999">
                                        </telerik:RadTreeNode>
                                        <telerik:RadTreeNode runat="server" Text="2 Week Package" AllowDrop="false" Value="3999">
                                        </telerik:RadTreeNode>
                                    </Nodes>
                                </telerik:RadTreeNode>
                                <telerik:RadTreeNode runat="server" Text="Mauritius" AllowDrag="false">
                                    <Nodes>
                                        <telerik:RadTreeNode runat="server" Text="Weekend Package" AllowDrop="false" Value="2999">
                                        </telerik:RadTreeNode>
                                        <telerik:RadTreeNode runat="server" Text="1 Week Package" AllowDrop="false" Value="3999">
                                        </telerik:RadTreeNode>
                                        <telerik:RadTreeNode runat="server" Text="2 Week Package" AllowDrop="false" Value="4999">
                                        </telerik:RadTreeNode>
                                    </Nodes>
                                </telerik:RadTreeNode>
                                <telerik:RadTreeNode runat="server" Text="Maldives" Expanded="true" AllowDrag="false">
                                    <Nodes>
                                        <telerik:RadTreeNode runat="server" Text="Weekend Package" AllowDrop="false" Value="3999">
                                        </telerik:RadTreeNode>
                                        <telerik:RadTreeNode runat="server" Text="1 Week Package" AllowDrop="false" Value="4999">
                                        </telerik:RadTreeNode>
                                        <telerik:RadTreeNode runat="server" Text="2 Week Package" AllowDrop="false" Value="5999">
                                        </telerik:RadTreeNode>
                                    </Nodes>
                                </telerik:RadTreeNode>
                            </Nodes>
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeView>
            </div>
            <div class="treeViewWrapper" >
                <telerik:RadTreeView RenderMode="Lightweight" runat="Server" ID="RadTreeView2" EnableDragAndDropBetweenNodes="false"
                    OnClientNodeDropping="onDropping" EnableDragAndDrop="true" OnNodeDrop="RadTreeView2_NodeDrop" 
                    Skin="Vista">
                    <Nodes>
                        <telerik:RadTreeNode runat="server" Text="Island" Expanded="true" AllowDrag="false" AllowDrop="false">
                            <Nodes>
                                <telerik:RadTreeNode runat="server" Text="Zanzibar" AllowDrag="false">
                                </telerik:RadTreeNode>
                                <telerik:RadTreeNode runat="server" Text="Mauritius" AllowDrag="false">
                                </telerik:RadTreeNode>
                                <telerik:RadTreeNode runat="server" Text="Maldives" AllowDrag="false">
                                </telerik:RadTreeNode>
                            </Nodes>
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeView>
            </div>
            <div style="width: 266px; float: left">
                <telerik:RadGrid RenderMode="Lightweight" runat="server" ID="RadGrid1" Width="266px" AutoGenerateColumns="false"
                    OnNeedDataSource="RadGrid1_NeedDataSource" OnItemDataBound="RadGrid1_ItemDataBound"
                    Skin="Vista">
                    <MasterTableView ShowHeadersWhenNoRecords="true" ShowFooter="true">
                        <FooterStyle CssClass="gridFooter"></FooterStyle>
                        <NoRecordsTemplate>
                            Drag and drop packages here...
                        </NoRecordsTemplate>
                        <Columns>
                            <telerik:GridBoundColumn DataField="Text" HeaderText="Item" UniqueName="Text">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Price" HeaderText="Price" DataFormatString="${0}"
                                UniqueName="Price">
                            </telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>
                <images src="images/checkOut.gif" alt="checkout" style="float: right; margin-top: 9px;" />
            </div>
            <div class="price-checker" id="priceChecker" runat="server">
                <div class="header">
                    Price Checker
                </div>
                <div class="description">
                    <asp:Label runat="server" Text="Drop a package here to check price" ID="Label1"></asp:Label>
                </div>
            </div>
            <div style="clear: both">
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance