UI controls for ASP.NET AJAX, MVC, WPF,Silverlight, Windows 8 and Windows Phone
Cross-platform Mobile Development Toolwith cloud-based architecture
Everything you need to build sites andmobile apps with JavaScript and HTML5
One easy tool for Functional, Performance,Load and Mobile software testing
Everything for your online business - contentmanagement, ecommerce, emarketing
Simple and intuitive project managementand collaboration software
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 70+ other controls are part of RadControls 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 the business logic of the app.
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.TreeView.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> <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> </AjaxSettings> </telerik:RadAjaxManager> <img src="Img/top.jpg" alt="Starski & 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="true" 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="true" OnClientNodeDropping="onDropping" EnableDragAndDrop="true" OnNodeDrop="RadTreeView2_NodeDrop" Skin="Vista"> <Nodes> <telerik:RadTreeNode runat="server" Text="Island" Expanded="true"> <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" Expanded="true" 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> </form> </body> </html>