Post
Ask Question

Using Templates In Kendo DropDownTree

Introduction

This blog will teach you how to implement the templates in Kendo DropDownTree control, and manipulate the data using a template.

Before going through this blog, please check out my latest article where I have explained how to do remote data binding in Kendo DropDownTree.

Templates in Kendo DropDownTree

Kendo template is mainly used for customizing the user interface rendering, Here, I will explain how to customize the data rendering in kendo dropdown tree with condition operator in kendo template.

KendoDropDownTree.html

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.      
  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"></ul>  
  34.         </div>  
  35.         <script id="dropdowntree-value-template" type="text/kendo-ui-template">  
  36.   
  37.             <span style="color:blueviolet"> #: data.name # </span>  
  38.   
  39.         </script>  
  40.         <script id="dropdowntree-template" type="text/kendo-ui-template">              
  41.            #if(item.hasEmployees)  
  42.             {#  
  43.             <span style="color:darkred">#: item.name #</span>  
  44.             #}  
  45.             else  
  46.             {#  
  47.             <span style="color:lightcoral">#: item.name #</span>  
  48.             #}#  
  49.         </script>  
  50.         <script>  
  51.   
  52.             homogeneous = new kendo.data.HierarchicalDataSource({  
  53.                 transport: {  
  54.                     read: {  
  55.                         url: "http://github-ci-staging.azurewebsites.net/api/Employees/Empdetails",  
  56.                         dataType: "json"  
  57.                     }  
  58.                 },  
  59.                 schema: {  
  60.                     model: {  
  61.                         id: "employeeId",  
  62.                         hasChildren: "hasEmployees"  
  63.                     }  
  64.                 }  
  65.             });  
  66.   
  67.             $("#dropdowntree").kendoDropDownTree({  
  68.                 placeholder: "Select ...",  
  69.                 dataSource: homogeneous,  
  70.                 height: "auto",  
  71.                 template: kendo.template($("#dropdowntree-template").html()),  
  72.                 valueTemplate: kendo.template($("#dropdowntree-value-template").html()),  
  73.                 change: onChange,  
  74.                 dataTextField: "name"  
  75.             });  
  76.             function onChange(e) {  
  77.                 debugger;  
  78.                 var listItem = $("#listItem");  
  79.                 if (typeof ('#listItem li') != undefined) {  
  80.                     $("#listItem ").find('li').remove()  
  81.                 }  
  82.                 $.each(e.sender._values, function (key, value) {  
  83.                     listItem.append("<li>" + value.name + "</li>");  
  84.                 })  
  85.             }  
  86.         </script>  
  87.     </div>  
  88.   
  89.   
  90. </body>  
  91. </html>  

We have used two templates in kendoDropDownTree,

  1. Template
  2. Value Template

Template is used to customize the data rendering in the input box while the Value Template is used to customize the data in the drop-down list

Template

 

From the above image, you can notice that the item which is selected is rendered with the color blue.

Value Template

 

From the above image, it is clear that based on the hasEmployee status, the color for each item in the list is applied.

Conclusion

We have seen how to customize the data rendering based on condition check using the kendo templates in kendo DropdownTree, 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.