TreeView

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

RadTreeView - Telerik's ASP.NET TreeView

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...
checkout
Price Checker
Drop a package here to check price

tlrk.it/151b0B1 To test the behavior of our controls on mobile devices, scan the QR code.

tlrk.it/151b0B1

About RadTreeView for ASP.NET AJAX

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 80+ 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.


Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular TreeView demo, you can use the following path to find it in the sample website application:
treeview/examples/overview

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

Resources

C# VB
Show code in new window Demo isolation steps
<%@ 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" %>
<%@ Register Src="~/TreeView/Examples/Overview/Info.ascx" TagPrefix="qsf" TagName="Info" %>
<!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>ASP.NET TreeView Example | RadTreeView by Telerik</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
   <telerik:RadCodeBlock runat="Server" ID="RadCodeBlock1">
        <script type="text/javascript">
               
          //<![CDATA[
             function isOverElement(currentElement, targetId) {
                  while (currentElement) {
                       if (currentElement.id == targetId)
                            return currentElement;

                       currentElement = currentElement.parentNode;
                  }

                  return null;
             }

             function onDropping(sender, args) {
                  var destNode = args.get_destNode();
                  var destElement = args.get_htmlElement();

                  if (destNode) return;

                  if (!destElement) return;
                  var priceChecker = isOverElement(destElement, "<%= priceChecker.ClientID%>");
                  var grid = isOverElement(destElement, "<%=RadGrid1.ClientID %>");

                  if (priceChecker) {
                       args.set_htmlElement(priceChecker);
                       return;
                  }
                  else if (grid) {
                       args.set_htmlElement(grid);
                       return;
                  }

                  args.set_cancel(true);
             }
               
     //]]>
     
        </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>
    <img src="Img/top.jpg" alt="Starski &amp; Sons Travel Agency" style="float: left;
        padding-left: 80px" />
    <div style="background: url(Img/bg.gif) repeat-y; padding: 15px 0px 35px 30px; font-size: 11px;
        font-style: italic; color: #333; width: 718px; clear: left; margin-left: 80px">
        Drag a package from Travel Packages to Favorites to create your wishtree.<br />
        <div style="width: 210px; float: left; margin-top: 15px;">
            <telerik:RadTreeView 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 style="width: 195px; float: left; margin-top: 15px;">
            <telerik:RadTreeView 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 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>
            <img src="Img/checkOut.gif" alt="checkout" style="float: right; margin-top: 9px;" />
        </div>
        <div style="font-style: normal; float: left; margin-top: 20px; clear: both; color: #258ebf;
            cursor: pointer; background: url(Img/priceChecker.gif) no-repeat; width: 364px;
            height: 67px;" id="priceChecker" runat="server">
            <div style="font-size: 24px; padding: 4px 0px 0px 87px;">
                Price Checker</div>
            <div style="font-size: 11px; padding: 0px 0px 0px 87px;">
                Drop a package here to check price</div>
            <div style="font-size: 11px; padding: 3px 0px 0px 87px; color: #478f00">
                <asp:Label runat="server" ID="Label1"></asp:Label>
            </div>
        </div>
        <div style="clear: both">
        </div>
    </div>
     <div class="qsf-overview-qr">
        <p>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/TreeView.png" AlternateText="tlrk.it/151b0B1" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        </p>
        <a href="http://tlrk.it/151b0B1">tlrk.it/151b0B1</a>
    </div>
    </form>
</body>
</html>