Post
Ask Question

Kendo DropDownTree Control With Remote Data Binding

Introduction

Kendo DropDownTree control is used to display the hierarchical data with tree view structure in DropDownList. In this article, we are going to see how to do remote binding in Kendo DropDownTree.

WEB API Services 

I'm going to use the following WEB API Services which are developed using ASP.NET CORE to construct the hierarchical data source for Kendo DropDownTree control. 

Employee.cs
  1. public class Employee  
  2.  {  
  3.      public int EmployeeId { get; set; }  
  4.      public string Name { get; set; }  
  5.      public bool HasEmployees { get; set; }  
  6.      public int? ReportsTo { get; set; }  
  7.   
  8.      public Employee(int EmployeeId, string Name, bool HasEmployee, int? ReportsTo)  
  9.      {  
  10.          this.EmployeeId = EmployeeId;  
  11.          this.Name = Name;  
  12.          this.HasEmployees = HasEmployee;  
  13.          this.ReportsTo = ReportsTo;  
  14.      }  
  15.   
  16.  }  
EmployeeController.cs
  1. [Produces("application/json")]  
  2.    [Route("api/Employees")]  
  3.    public class EmployeesController : Controller  
  4.    {  
  5.       
  6.        [HttpGet]  
  7.        [AllowAnonymous]         
  8.        [Route("Empdetails")]  
  9.        public List<Employee> GetEmployees(int? EmployeeId)  
  10.        {  
  11.            List<Employee> employees = new List<Employee>();  
  12.            employees.Add(new Employee(1, "Arun", true, null));  
  13.            employees.Add(new Employee(2, "Pradeep", false, 1));  
  14.            employees.Add(new Employee(3, "Gowtham", true, null));  
  15.            employees.Add(new Employee(4, "Raj", false, 3));  
  16.            if (EmployeeId != null)  
  17.            {  
  18.                return employees.Where(e => e.ReportsTo == EmployeeId).ToList();  
  19.            }  
  20.            else  
  21.            {  
  22.                return employees.Where(e => !e.ReportsTo.HasValue).ToList();  
  23.            }  
  24.        }  
  25.    }  
 GetEmployees action will return a list of employees based on Employeeid. 
 
 Testing the API in Postman 
 
  http://github-ci-staging.azurewebsites.net/api/Employees/Empdetails
 
 
 http://github-ci-staging.azurewebsites.net/api/Employees/Empdetails?employeeid=1
 
 
 
Construct the hierarchical DataSource for kendo DropDownTree.
 
KendoDropDownTree.html 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <base href="https://demos.telerik.com/kendo-ui/dropdowntree/remote-data-binding">  
  5.     <style>  
  6.         html {  
  7.             font-size: 14px;  
  8.             font-family: Arial, Helvetica, sans-serif;  
  9.         }  
  10.     </style>  
  11.     <title></title>  
  12.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common-material.min.css" />  
  13.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.material.min.css" />  
  14.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.material.mobile.min.css" />  
  15.   
  16.     <script src="https://kendo.cdn.telerik.com/2018.2.516/js/jquery.min.js"></script>  
  17.     <script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>  
  18.   
  19.   
  20. </head>  
  21. <body>  
  22.     <h2> Kendo DropDownTree</h2>  
  23.     <br />  
  24.     <br />  
  25.     <div id="example">  
  26.         <div class="demo-section k-content">  
  27.             <input id="dropdowntree" style="width: 100%;" />  
  28.         </div>  
  29.         <script>  
  30.              
  31.             homogeneous = new kendo.data.HierarchicalDataSource({  
  32.                 transport: {  
  33.                     read: {  
  34.                         url: "http://github-ci-staging.azurewebsites.net/api/Employees/Empdetails",  
  35.                         dataType: "json"  
  36.                     }  
  37.                 },  
  38.                 schema: {  
  39.                     model: {  
  40.                         id: "employeeId",  
  41.                         hasChildren: "hasEmployees"  
  42.                     }  
  43.                 }  
  44.             });  
  45.   
  46.             $("#dropdowntree").kendoDropDownTree({  
  47.                 placeholder: "Select ...",  
  48.                 dataSource: homogeneous,  
  49.                 height: "auto",  
  50.                 dataTextField: "name"  
  51.             });  
  52.         </script>  
  53.     </div>  
  54.   
  55.   
  56. </body>  
  57. </html>  
The dataload in the hierarchical data source will happen based on the hasChildren property which is defined in the schema. Initial request will fetch the employee details which contains hasEmployees value as true. The rest of the requests will happen based on Initial load.
 
Http request driven by hierarchial data source
 
Open the developer tool in the browser and switch to the Network section to check the HTTP request.  
 
 
 
From the above figure, you can notice that to load the complete hierarchical data three HTTP calls are made from kendo hierarchical datasource. 
 
The first call will load the employee details where the hasEmployees value is true, next call depends on the first call based on employeeId to load the rest of employees under Employee with employeeId as 1 and the final call will load the employees under Employee with employeeId 3. In the hierarchal data source, first, the master data will get loaded and then the child data will load to frame the tree structure.    
 
Reference
 
https://docs.telerik.com/kendo-ui/controls/editors/dropdowntree/overview 
 
I hope you have enjoyed this article. Your valuable feedback, question, or comments about this article are always welcomed.
 
For source code - click here.


Similar Articles