Post
Ask Question

Check Boxes In Kendo DropDownTree

Introduction

This blog will teach you how to implement the checkboxes in Kendo DropDownTree control, and to fetch the selected item from it on change event. 
 
Before going through this blog, please check out my latest article where I have explained how to do remote data binding in Kendo DropDownTree.   
 
Checkboxes in Kendo DropDownTree 
 
To add the checkBox to each item in Kendo dropdown Tree, we just need to enable the checkboxes property as written in below program. 
 
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: 50%;" />  
  28.         </div>  
  29.   
  30.         <hr style="margin-top:40px"/>  
  31.         <h3>Selected Item(s)</h3>  
  32.         <div>  
  33.             <ul  id="listItem">  
  34.   
  35.             </ul>  
  36.         </div>  
  37.         <script>  
  38.              
  39.             homogeneous = new kendo.data.HierarchicalDataSource({  
  40.                 transport: {  
  41.                     read: {  
  42.                         url: "http://localhost:11207/api/Employees/Empdetails",  
  43.                         dataType: "json"  
  44.                     }  
  45.                 },  
  46.                 schema: {  
  47.                     model: {  
  48.                         id: "employeeId",  
  49.                         hasChildren: "hasEmployees"  
  50.                     }  
  51.                 }  
  52.             });  
  53.   
  54.             $("#dropdowntree").kendoDropDownTree({  
  55.                 placeholder: "Select ...",  
  56.                 dataSource: homogeneous,  
  57.                 height: "auto",  
  58.                 checkboxes: true,  
  59.                 change: onChange,  
  60.                 dataTextField: "name"  
  61.             });  
  62.             function onChange(e) {  
  63.                 
  64.                 var listItem = $("#listItem");  
  65.                 if (typeof ('#listItem li') != undefined) {  
  66.                     $("#listItem ").find('li').remove()  
  67.                 }  
  68.                 $.each(e.sender._values, function(key,value)  
  69.                 {  
  70.                     listItem.append("<li>" + value.name + "</li>");  
  71.                 })  
  72.             }  
  73.         </script>  
  74.     </div>  
  75.   
  76.   
  77. </body>  
  78. </html>  
The onChange event is written to get the selected values from the dropdown tree when any changes happen in control.

e.sender._values  will give you the selected list items from the kendo drop-down tree.

Kendo DropDownTree with checkboxes
 
Getting Selected Item from kendo DropDown Tree
 
Conclusion
 
We have seen how to implement the checkboxes and to fetch the selected values from the kendoDropDownTree. We will see more about the kendoDropDownTree control in my future blog. 
  
Reference
https://docs.telerik.com/kendo-ui/controls/editors/dropdowntree/overview

I hope you have enjoyed this blog. Your valuable feedback, questions, or comments about this article are always welcomed.

For the source code - click here.