ASP.NET

TreeView In Kendo UI Using ASP.NET WEB API

To explain how to implement the TreeView in the kendo UI, I’m going to use the following API's,

  1. GET: api/employees
  2. GET: api/employees/{EmployeeID}

Please go through my previous article to get how to create a RESTful API using ASP.NET WEB API with Entity Framework.

The Employee model class in the project

  1. public class Employee  
  2.         {  
  3.             [Key]  
  4.             public int EmployeeId { get; set; }  
  5.             public string FullName { get; set; }  
  6.             public bool HasEmployees { get; set; }  
  7.             public int? ReportsTo { get; set; }  
  8.         }  

The Employees Controller class

  1. public class EmployeesController : ApiController  
  2.   {  
  3.       private EmployeeContext db = new EmployeeContext();  
  4.   
  5.       // GET: api/Employees  
  6.       public IQueryable<Employee> GetEmployees()  
  7.       {  
  8.           return db.Employees.Where(c=>!c.ReportsTo.HasValue);  
  9.       }  
  10.   
  11.       // GET: api/Employees/5  
  12.       [ResponseType(typeof(Employee))]  
  13.       public IHttpActionResult GetEmployee(int EmployeeId)  
  14.       {  
  15.           var employee = db.Employees.Where(c=>c.ReportsTo== EmployeeId);  
  16.           if (employee == null)  
  17.           {  
  18.               return NotFound();  
  19.           }  
  20.   
  21.           return Ok(employee);  
  22.       }  

SQL Table

   

GET: api/employees response,

 
 
From the above image it is clear that the api/employees API gives you the details of employeees who doesn’t have the report to value, 

GET:api/employees/{EmployeeId} response.

  

From the above image it is clear that the api/employees/{EmployeeId} API gives you the details of employee who have the report to value by filtering it with EmployeeID which is send through the request

Now, let us design the UI to use these API's. 

Kendo Tree View

The Kendo UI TreeView Widget displays hierarchical data in a traditional tree structure, Kendo UI TreeView can be created in two ways:

  1. Through the definition of a hierarchical list by using static HTML. This approach is suitable for small hierarchies and for data that does not frequently change.
  2. Through the usage of dynamic data binding either to a local, or a remote data source. This approach is suitable for larger data sets and for data that frequently changes.

In this article we are going to see how to implement the Kendo TreeView using the dynamic data binding to the data source, create HTML page in the project, in my case I named it Treeview.html

Treeview.html

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />  
  6.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />  
  7.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />  
  8.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />  
  9.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>  
  10.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>  
  11.     <script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>  
  12.     <meta charset="utf-8" />  
  13. </head>  
  14. <body>  
  15.     <div id="treeview" class="demo-section"></div>  
  16. </body>  
  17. </html>  
JavaScript
  1. homogeneous = new kendo.data.HierarchicalDataSource({  
  2.     transport: {  
  3.         read: {  
  4.             url: "api/Employees",  
  5.             dataType: "json"  
  6.         }  
  7.     },  
  8.     schema: {  
  9.         model: {  
  10.             id: "EmployeeId",  
  11.             hasChildren: "HasEmployees"  
  12.         }  
  13.     }  
  14. });  
  15.   
  16. $("#treeview").kendoTreeView({  
  17.     dataSource: homogeneous,  
  18.     dataTextField: "FullName",  
  19. });  
Result in Browser 
 
 
 
 
 
 
 
 
I hope you have enjoyed this article. Your valuable feedback, question, or comments about this article are always welcomed.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs