Events In Kendo TreeView

In this article you will learn how to handle events in kendo TreeView.

To explain how to handle the events in the TreeView of Kendo UI, I’m going to use the following API's,

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

If you are new to ASP.NET WEB API, 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 { getset; }    
  5.             public string FullName { getset; }    
  6.              public bool HasEmployees { getset; }    
  7.             public int? ReportsTo { getset; }    
  8.          }    

The Employees Controller class

  1. public class EmployeesController : ApiController  
  2.   {  
  3.       private EmployeeContext db = new EmployeeContext();  
  4.   
  5.       // GET: api/Employees  
  6.       [HttpGet]  
  7.       [ActionName("Empdetails")]  
  8.       public IQueryable<Employee> GetEmployees()  
  9.       {  
  10.           return db.Employees.Where(c=>!c.ReportsTo.HasValue);  
  11.       }  
  12.   
  13.       // GET: api/Employees/5  
  14.       [HttpGet]  
  15.       [ActionName("Empdetails")]  
  16.       [ResponseType(typeof(Employee))]  
  17.   
  18.       public IHttpActionResult GetEmployee(int EmployeeId)  
  19.       {  
  20.           var employee = db.Employees.Where(c=>c.ReportsTo== EmployeeId);  
  21.           if (employee == null)  
  22.           {  
  23.               return NotFound();  
  24.           }  
  25.   
  26.           return Ok(employee);  
  27.       }  
SQL Table
 
 
 
GET: api/Employees/Empdetails response,
 
 
 
From the above image it is clear that the api/Employees/Empdetails API gives you the details of employees who doesn’t have the report to value,  
 
GET:api/Employees/Empdetails/{EmployeeId} response. 
 
 
 
From the above image it is clear that the api/Employees/Empdetails/{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 our API's are ready, so let us play with events in Kendo Tree View.
 
Events in Kendo Tree View 

      Change

Thi The event is fired when the selection changed by the user. 
  1. function onChange(e) {  
  2.         alert("Change Event Fired");  
  3.     }  

Result in Browser

 
 
Collapse

This event is fired before a subgroup gets collapsed.
 

 

  1. function onCollapse(e) {  
  2.   
  3. alert("Collapsing : " + this.text(e.node));  
  4.   
  5. }  
  6.   
  7.    
Result in Browser
 
 
 
 

      DataBound

This event is fired after the dataSource change event has been processed.

  1. function onDataBound(e)  
  2.         {  
  3.             alert("DataBound Event Fired");  
  4.         }  
Result in Browser
 
 
Draging events
  • Drag start: Event is fired before the dragging of a node starts.   
  1. function onDragStart(e) {  
  2.             console.log("Started dragging :" + this.text(e.sourceNode));  
  3.   
  4.         }  
  •   Drag: Triggered while a node is being dragged.
  1. function onDrag(e) {  
  2.             console.log("Dragging : " + this.text(e.sourceNode));  
  3.         }  
  • Drag End: Triggered after a node has been dropped.  
  1. function onDragEnd(e) {  
  2.             console.log("Finished dragging :" + this.text(e.sourceNode));  
  3.         }  
Result in Browser

  

  • Expand: This event is fired before a subgroup gets expanded.
  1. function onExpand(e) {  
  2.            alert("Expanding : " + this.text(e.node));  
  3.         }  

Result in Browser

 

  • Select: This event is fired when a node is being selected by the user.
  1. function onSelect(e) {  
  2.             alert("Selecting : " + this.text(e.node));  
  3.         }  

Result in Browser

 
 
 
Complete code in 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.     <script src="Scripts/console.js"></script>  
  13.     <meta charset="utf-8" />  
  14. </head>  
  15. <body>  
  16.     <h3>Kendo Tree View</h3>  
  17.   
  18.     <br />  
  19.     <div id="treeview" class="demo-section"></div>  
  20.     <br />  
  21.     <br />  
  22.     <div class="box">  
  23.         <div id="myconsole" class="console">  
  24.   
  25.         </div>  
  26.     </div>  
  27.     <script>  
  28.           
  29.         function onSelect(e) {  
  30.             alert("Selecting : " + this.text(e.node));  
  31.         }  
  32.   
  33.   
  34.         function onChange(e) {  
  35.             alert("Change Event Fired");  
  36.         }  
  37.   
  38.         function onCollapse(e) {  
  39.             alert("Collapsing : " + this.text(e.node));  
  40.         }  
  41.   
  42.         function onExpand(e) {  
  43.            alert("Expanding : " + this.text(e.node));  
  44.         }  
  45.   
  46.         function onDragStart(e) {  
  47.             console.log("Started dragging :" + this.text(e.sourceNode));  
  48.         }  
  49.   
  50.         function onDrag(e) {  
  51.             console.log("Dragging : " + this.text(e.sourceNode));  
  52.         }  
  53.   
  54.   
  55.         function onDragEnd(e) {  
  56.             console.log("Finished dragging :" + this.text(e.sourceNode));  
  57.         }  
  58.   
  59.           
  60.         function onDataBound(e)  
  61.         {  
  62.             alert("DataBound Event Fired");  
  63.         }  
  64.     
  65.   
  66.     homogeneous = new kendo.data.HierarchicalDataSource({  
  67.         transport: {  
  68.             read: {  
  69.                 url: "api/Employees/Empdetails" 
  70.                 dataType: "json"  
  71.             }  
  72.         },  
  73.         schema: {  
  74.             model: {  
  75.                 id: "EmployeeId",  
  76.                 hasChildren: "HasEmployees"  
  77.             }  
  78.         }  
  79.     });  
  80.   
  81.     $("#treeview").kendoTreeView({  
  82.         dataSource: homogeneous,  
  83.         dataTextField: "FullName",  
  84.          drop: ondrop,  
  85.         select: onSelect,  
  86.         check: onCheck,  
  87.         change: onChange,  
  88.         collapse: onCollapse,  
  89.         expand: onExpand,  
  90.          
  91.         dragstart: onDragStart,  
  92.         drag: onDrag,  
  93.         dragend: onDragEnd,  
  94.         dataBound:onDataBound  
  95.     });  
  96.   
  97.     }  
  98.     </script>  
  99. </body>  
  100. </html>  
There is one more event called drop event which I'm going to discuss about in more detail form in my next article with drag and drop functionality in Kendo Tree View .
 
I hope you have enjoyed this article. Your valuable feedback, question, or comments about this article are always welcomed.