Post
Ask Question

TreeView Controls in Kendo UI and ASP.Net

TreeView

A Treeview control is a way to display information in a hierarchical order. Each item has a number of sub items. The treeview is a parent and child way to represent and very easily understand something. Treeview is used to easily explain our process in the client. For Example:

 

"My Tree" is the root node of the tree, under the root node are two sub node ("Favorites Tree" and "Language Tree"). This sub-node has sub nodes ("C#Corner" and "MCN Solutions") and this sub-node has a leaf node.

Kendo UI TreeView

Kendo UI treeview displays hierarchical data in a traditional tree structure. This is used for user interaction in mouse re-ordering operations via drag and drop. There are two ways to create a treeview in the Kendo UI.

  1. Hierarchical list with static HTML.
  2. Use dynamic data binding to data source.

Hierarchical list with static HTML

The static HTML is small hierarchies and is for data that does not change frequently.

  1. <ul id="treeView">  
  2.     <li>Item 1  
  3.         <ul>  
  4.             <li>Item 1.1</li>  
  5.             <li>Item 1.2</li>  
  6.         </ul>  
  7.     </li>  
  8.     <li>Item 2</li>  
  9. </ul>  

Use dynamic data binding to data source

 

Data binding is used for larger data sets and for data that changes frequently.

  1. $(document).ready(function () {  
  2.     $("#treeView").kendoTreeView({  
  3.         dataSource: [  
  4.             {  
  5.                 text: "Item 1",  
  6.                 items: [  
  7.                     { text: "Item 1.1" },  
  8.                     { text: "Item 1.2" }  
  9.                 ]  
  10.             },  
  11.             { text: "Item 2" }  
  12.         ]  
  13.     })  
  14. });  
Now we see the example program of a Kendo UI treeview. This example program uses a drag and drop treeview. The following code is used to design the HTML and JavaScript page.
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>Welcome Kendo Treeview</title>  
  5.     <link href="Content/kendo/2014.1.318/kendo.default.min.css" rel="stylesheet" />  
  6.     <link href="Content/kendo/2014.1.318/kendo.common.min.css" rel="stylesheet" />  
  7.     <script src="Scripts/kendo/2014.1.318/jquery.min.js"></script>  
  8.     <script src="Scripts/kendo/2014.1.318/kendo.web.min.js"></script>  
  9.     <script src="Scripts/JavaScript2.js"></script>  
  10. </head>  
  11. <body>  
  12.     <div id="example">  
  13.         <div class="demo-section k-header">  
  14.             <div id="treeview-left"></div>  
  15.             <div id="treeview-right"></div>  
  16.         </div>  
  17.         <script>  
  18.             $("#treeview-left").kendoTreeView({  
  19.                 dragAndDrop: true,  
  20.                 dataSource: [  
  21.                     {  
  22.                         text: "Fruits", expanded: true, items: [  
  23.                           { text: "Mango" },  
  24.                           { text: "Papaya" },  
  25.                           { text: "Apple" }  
  26.                         ]  
  27.                     },  
  28.                     {  
  29.                         text: "Dry Fruits", items: [  
  30.                           { text: "Fig" },  
  31.                           { text: "Dates" },  
  32.                           { text: "Prune" }  
  33.                         ]  
  34.                     }  
  35.                 ]  
  36.             });  
  37.             $("#treeview-right").kendoTreeView({  
  38.                 dragAndDrop: true,  
  39.                 dataSource: [  
  40.                     {  
  41.                         text: "Days", expanded: true, items: [  
  42.                           { text: "Sunday" },  
  43.                           { text: "Monday" },  
  44.                           { text: "Tuesday" },  
  45.                           { text: "Wednesday" }  
  46.                         ]  
  47.                     },  
  48.                     {  
  49.                         text: "Months", items: [  
  50.                           { text: "January" },  
  51.                           { text: "February" },  
  52.                           { text: "March" }  
  53.                         ]  
  54.                     }  
  55.                 ]  
  56.             });  
  57.         </script>  
  58.         <style scoped>  
  59.             #treeview-left,  
  60.             #treeview-right {  
  61.                 float: left;  
  62.                 width: 220px;  
  63.                 overflow: visible;  
  64.             }  
  65.    
  66.             .demo-section {  
  67.                 width: 500px;  
  68.             }  
  69.    
  70.                 .demo-section:after {  
  71.                     content: ".";  
  72.                     display: block;  
  73.                     height: 0;  
  74.                     clear: both;  
  75.                     visibility: hidden;  
  76.                 }  
  77.         </style>  
  78.     </div>  
  79. </body>  
  80. </html>  
The code above uses the Kendo UI Treeview to display the output in a treeview order. Now see the output in the following. The following output window displays only a treeview.
 
 
 The following output window displays the Kendo UI drag and drop treeview.
 
 
 
 Now compare both output windows; it is then easy to understand the normal treeview and drag & drop treeview.
 

 ASP.NET TreeView

 

The ASP.NET treeview is a powerful server control for rendering a treeview. This is a very important control for ASP.NET. It is used to display the data in a parent/child relationship or hierarchical order. This ASP.NET treeview supports more programming models from statically defined trees to dynamically constructed trees to data bound trees.

There are the following three types of nodes available in a treeview.

  1. Root: This root node has no parent node, only one or more child nodes.

  2. Parent: This node has a parent node and one or more child nodes also available.

  3. Leaf: The Leaf node has no child nodes, only a parent node.

 
 
Now we see an example of an ASP.NET treeview.  
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication6.WebForm1" %>  
  2.    
  3. <!DOCTYPE html>  
  4.    
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title>Welcome ASP.NET Treeview</title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server" action="WebForm1.aspx">  
  11.         <div>  
  12.             <h2>Using TreeView Control</h2>  
  13.             <asp:TreeView ID="TreeView1" runat="server">  
  14.                 <Nodes>  
  15.                     <asp:TreeNode Text="My Tree">  
  16.                         <asp:TreeNode Text="Favorites Tree">  
  17.                             <asp:TreeNode Text="C#Corner">  
  18.                                 <asp:TreeNode Text="Home" NavigateUrl="http://www.c-sharpcorner.com" />  
  19.                                 <asp:TreeNode Text="Answers" NavigateUrl="http://www.c-sharpcorner.com/Forums" />  
  20.                                 <asp:TreeNode Text="Blogs" NavigateUrl="http://www.c-sharpcorner.com/Blogs" />  
  21.                                 <asp:TreeNode Text="Videos" NavigateUrl="http://www.c-sharpcorner.com/Videos" />  
  22.                                 <asp:TreeNode Text="Interviews" NavigateUrl="http://www.c-sharpcorner.com/interviews" />  
  23.                                 <asp:TreeNode Text="Books" NavigateUrl="http://www.c-sharpcorner.com/ebooks" />  
  24.                                 <asp:TreeNode Text="Links" NavigateUrl="http://www.c-sharpcorner.com/resources" />  
  25.                                 <asp:TreeNode Text="News" NavigateUrl="http://www.c-sharpcorner.com/news" />  
  26.                                 <asp:TreeNode Text="Chapters" NavigateUrl="http://www.c-sharpcorner.com/Chapters" />  
  27.                                 <asp:TreeNode Text="CareerAdvice" NavigateUrl="http://www.c-sharpcorner.com/CareerAdvice" />  
  28.                                 <asp:TreeNode Text="Jobs" NavigateUrl="http://www.c-sharpcorner.com/jobs" />  
  29.                             </asp:TreeNode>  
  30.                             <asp:TreeNode Text="C#Corner Contribute">  
  31.                                 <asp:TreeNode Text="An Article" NavigateUrl="http://www.c-sharpcorner.com/publish/articlesubmissionguideline.aspx" />  
  32.                                 <asp:TreeNode Text="A Blog" NavigateUrl="http://www.c-sharpcorner.com/blogs/CreateBlog.aspx" />  
  33.                                 <asp:TreeNode Text="A News" NavigateUrl="http://www.c-sharpcorner.com/news/CreateNews.aspx" />  
  34.                                 <asp:TreeNode Text="A Video" NavigateUrl="http://www.c-sharpcorner.com/Publish/CreateArticle.aspx" />  
  35.                                 <asp:TreeNode Text="A Link" NavigateUrl="http://www.c-sharpcorner.com/Resources/CreateResource.aspx" />  
  36.                                 <asp:TreeNode Text="An Interview Question" NavigateUrl="http://www.c-sharpcorner.com/interviews/Question/PostQuestion.aspx" />  
  37.                             </asp:TreeNode>  
  38.                             <asp:TreeNode Text="MCN Solutions">  
  39.                                 <asp:TreeNode Text="Home page" NavigateUrl="http://www.mcnsolutions.net" />  
  40.                                 <asp:TreeNode Text="Services" NavigateUrl="http://www.mcnsolutions.net/Services" />  
  41.                                 <asp:TreeNode Text="Technology" NavigateUrl="http://www.mcnsolutions.net/Technology.aspx" />  
  42.                                 <asp:TreeNode Text="Outsourcing" NavigateUrl="http://www.mcnsolutions.net/Outsourcing" />  
  43.                                 <asp:TreeNode Text="Industries" NavigateUrl="http://www.mcnsolutions.net/Industries.aspx" />  
  44.                                 <asp:TreeNode Text="Company" NavigateUrl="http://www.mcnsolutions.net/Company" />  
  45.                                 <asp:TreeNode Text="Contact" NavigateUrl="http://www.mcnsolutions.net/Contact-Us" />  
  46.                             </asp:TreeNode>  
  47.                         </asp:TreeNode>  
  48.                         <asp:TreeNode Text="Language Tree">  
  49.                             <asp:TreeNode Text="C" NavigateUrl="http://www.tutorialspoint.com/csharp" />  
  50.                             <asp:TreeNode Text="Java" NavigateUrl="http://www.tutorialspoint.com/java/index.htm" />  
  51.                             <asp:TreeNode Text="Objective-C" NavigateUrl="http://www.tutorialspoint.com/objective_c" />  
  52.                             <asp:TreeNode Text="C++" NavigateUrl="http://www.learncpp.com" />  
  53.                             <asp:TreeNode Text="C#" NavigateUrl="http://www.completecsharptutorial.com" />  
  54.                             <asp:TreeNode Text="PHP" NavigateUrl="http://www.w3schools.com/PHP" />  
  55.                             <asp:TreeNode Text="JavaScript" NavigateUrl="http://www.w3schools.com/js/DEFAULT.asp" />  
  56.                             <asp:TreeNode Text="VB.NET" NavigateUrl="http://www.tutorialspoint.com/vb.net" />  
  57.                             <asp:TreeNode Text="PL/SQL" NavigateUrl="http://plsql-tutorial.com" />  
  58.                             <asp:TreeNode Text="COBOL" NavigateUrl="http://www.b-u.ac.in/sde_book/bca_cobol.pdf" />  
  59.                             <asp:TreeNode Text="Python" NavigateUrl="http://www.tutorialspoint.com/python" />  
  60.                             <asp:TreeNode Text="ASP.NET" NavigateUrl="http://www.w3schools.com/ASPNET/default.asp" />  
  61.                         </asp:TreeNode>  
  62.                         <asp:TreeNode Text="Others Tree">  
  63.                             <asp:TreeNode Text="Sport Games">  
  64.                                 <asp:TreeNode Text="Cricket" NavigateUrl="http://www.cricketgames.me" />  
  65.                                 <asp:TreeNode Text="Foot Ball" NavigateUrl="http://www.myfootballgames.co.uk/" />  
  66.                                 <asp:TreeNode Text="Tennis" NavigateUrl="http://www.freetennis.org" />  
  67.                             </asp:TreeNode>  
  68.                             <asp:TreeNode Text="New Paper">  
  69.                                 <asp:TreeNode Text="English">  
  70.                                     <asp:TreeNode Text="The Hindu" NavigateUrl="http://www.thehindu.com" />  
  71.                                     <asp:TreeNode Text="Business Line" NavigateUrl="http://www.thehindubusinessline.com" />  
  72.                                     <asp:TreeNode Text="The Times of India" NavigateUrl="http://timesofindia.indiatimes.com" />  
  73.                                 </asp:TreeNode>  
  74.                                 <asp:TreeNode Text="Hindi">  
  75.                                     <asp:TreeNode Text="Dainik Jagran" NavigateUrl="http://www.indiapress.org/gen/news.php/Dainik_Jagran/" />  
  76.                                     <asp:TreeNode Text="Janwarta" NavigateUrl="http://www.janwarta.com/" />  
  77.                                     <asp:TreeNode Text="Hari Bhoomi" NavigateUrl="http://www.haribhoomi.com/" />  
  78.                                 </asp:TreeNode>  
  79.                                 <asp:TreeNode Text="Tamil">  
  80.                                     <asp:TreeNode Text="Dinakaran" NavigateUrl="http://www.dinakaran.com" />  
  81.                                     <asp:TreeNode Text="Tamil Murasu" NavigateUrl="http://tamilmurasu.org" />  
  82.                                     <asp:TreeNode Text="Dinamalar" NavigateUrl="http://www.dinamalar.com" />  
  83.                                 </asp:TreeNode>  
  84.                             </asp:TreeNode>  
  85.                             <asp:TreeNode Text="Social Media">  
  86.                                 <asp:TreeNode Text="FaceBook" NavigateUrl="http://www.facebook.com" />  
  87.                                 <asp:TreeNode Text="Twitter" NavigateUrl="http://twitter.com/signup" />  
  88.                                 <asp:TreeNode Text="Google+" NavigateUrl="https://plus.google.com" />  
  89.                                 <asp:TreeNode Text="LinkedIn" NavigateUrl="https://in.linkedin.com" />  
  90.                                 <asp:TreeNode Text="YouTube" NavigateUrl="https://www.youtube.com" />  
  91.                             </asp:TreeNode>  
  92.                         </asp:TreeNode>  
  93.                     </asp:TreeNode>  
  94.                 </Nodes>  
  95.             </asp:TreeView>  
  96.         </div>  
  97.     </form>  
  98. </body>  
  99. </html>  

 
The code above uses the ASP.NET treeview to display the output in a treeview order. Now see the output in the following window. The following output window displays only a treeview.
 
 
 
The preceding output window displays only a root node and parent only. The following output window displays the root node and parent node and leaf node.
 
 
 
Now compare both of the output windows to easily understand which is a root node, a parent node and a leaf node.
 

When you run the application you will get the output window above, then you want to go to the C# Corner home page, in other words click the home option of the C# Corner and the home page will automatically open. Otherwise if you want to go to the MCN solution page then click under the MCN solution option. For example see the following window.

 
  
 
Then if you want to go and play online games or read a new paper or learn a language then click under the specific option, the page will open automatically. For example see the following new paper window. 
 
  
 Summary
 
This article described how to use the Kendo UI drag and drop treeview and ASP.NET treeview controls in a web application. Thanks for reading.


Similar Articles