JQuery

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 { 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.       [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. 

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