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
- <!DOCTYPE html>
- <html>
- <head>
-
- <style>
- html {
- font-size: 14px;
- font-family: Arial, Helvetica, sans-serif;
- }
- </style>
- <title></title>
- <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common-material.min.css" />
- <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.material.min.css" />
- <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.material.mobile.min.css" />
-
- <script src="https://kendo.cdn.telerik.com/2018.2.516/js/jquery.min.js"></script>
- <script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>
-
-
- </head>
- <body>
- <h2> Kendo DropDownTree</h2>
- <br />
- <br />
- <div id="example">
- <div class="demo-section k-content">
- <input id="dropdowntree" style="width: 50%;" />
- </div>
-
- <hr style="margin-top:40px" />
- <h3>Selected Item(s)</h3>
- <div>
- <ul id="listItem"></ul>
- </div>
- <script id="dropdowntree-value-template" type="text/kendo-ui-template">
-
- <span style="color:blueviolet"> #: data.name # </span>
-
- </script>
- <script id="dropdowntree-template" type="text/kendo-ui-template">
- #if(item.hasEmployees)
- {#
- <span style="color:darkred">#: item.name #</span>
- #}
- else
- {#
- <span style="color:lightcoral">#: item.name #</span>
- #}#
- </script>
- <script>
-
- homogeneous = new kendo.data.HierarchicalDataSource({
- transport: {
- read: {
- url: "http://github-ci-staging.azurewebsites.net/api/Employees/Empdetails",
- dataType: "json"
- }
- },
- schema: {
- model: {
- id: "employeeId",
- hasChildren: "hasEmployees"
- }
- }
- });
-
- $("#dropdowntree").kendoDropDownTree({
- placeholder: "Select ...",
- dataSource: homogeneous,
- height: "auto",
- template: kendo.template($("#dropdowntree-template").html()),
- valueTemplate: kendo.template($("#dropdowntree-value-template").html()),
- change: onChange,
- dataTextField: "name"
- });
- function onChange(e) {
- debugger;
- var listItem = $("#listItem");
- if (typeof ('#listItem li') != undefined) {
- $("#listItem ").find('li').remove()
- }
- $.each(e.sender._values, function (key, value) {
- listItem.append("<li>" + value.name + "</li>");
- })
- }
- </script>
- </div>
-
-
- </body>
- </html>
We have used two templates in kendoDropDownTree,
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.