JQuery

Checkboxes In Kendo TreeView

Introduction

In my last article, we have seen how to remotely bind the data into Kendo TreeView. This article tells you how to implement the checkboxes in the same.

Content

  • Enabling the checkboxes in the kendo TreeView.
  • Fetching the data based on checkbox selection in TreeView.

Enabling the checkboxes in kendo TreeView

Please go through my previous article to find how to do remote data binding in kendo TreeView.

KendoTreeView.html

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>   
  4.     <style>  
  5.         html {  
  6.             font-size: 14px;  
  7.             font-family: Arial, Helvetica, sans-serif;  
  8.         }  
  9.     </style>  
  10.     <title></title>  
  11.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common-material.min.css" />  
  12.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.min.css" />  
  13.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.mobile.min.css" />  
  14.   
  15.     <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>  
  16.     <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>  
  17. </head>  
  18. <body>  
  19.     <div id="example">  
  20.         <div class="demo-section k-content">  
  21.             <div class="k-content">  
  22.                 <h4> Kendo Tree View</h4>  
  23.   
  24.             </div>  
  25.   
  26.             <div id="treeview"></div>  
  27.               
  28.         </div>  
  29.         <script>  
  30.                     homogeneous = new kendo.data.HierarchicalDataSource({  
  31.                         transport: {  
  32.                             read: {  
  33.                                 url: "http://github-ci-staging.azurewebsites.net/api/Automobiles/DataSource",  
  34.                                 dataType: "json"  
  35.                             }  
  36.                         },  
  37.                         schema: {  
  38.                             model: {  
  39.                                 id: "value",  
  40.                                 children: "items"  
  41.                             }  
  42.                         }  
  43.                     });  
  44.   
  45.                 $("#treeview").kendoTreeView({  
  46.                     dataSource: homogeneous,  
  47.                     dataTextField: ["name"],  
  48.                     dataBound: function (e)  
  49.                     {  
  50.                         var treeView = $('#treeview').data('kendoTreeView');  
  51.                         treeView.expand(".k-item");  
  52.                     }  
  53.             });  
  54.   
  55.                 
  56.                  
  57.         </script>  
  58.     </div>  
  59. </body>  
  60. </html>  

Result
 
Figure 1: Kendo TreeView with remote data binding

To enable the checkbox in kendo TreeView, define the checkboxes attribute, as given in the below code.

KendoTreeView.html 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>   
  4.     <style>  
  5.         html {  
  6.             font-size: 14px;  
  7.             font-family: Arial, Helvetica, sans-serif;  
  8.         }  
  9.     </style>  
  10.     <title></title>  
  11.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common-material.min.css" />  
  12.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.min.css" />  
  13.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.mobile.min.css" />  
  14.   
  15.     <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>  
  16.     <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>  
  17. </head>  
  18. <body>  
  19.     <div id="example">  
  20.         <div class="demo-section k-content">  
  21.             <div class="k-content">  
  22.                 <h4> Kendo Tree View</h4>  
  23.   
  24.             </div>  
  25.   
  26.             <div id="treeview"></div>   
  27.         </div>  
  28.         <script>  
  29.                     homogeneous = new kendo.data.HierarchicalDataSource({  
  30.                         transport: {  
  31.                             read: {  
  32.                                 url: "http://github-ci-staging.azurewebsites.net/api/Automobiles/DataSource",  
  33.                                 dataType: "json"  
  34.                             }  
  35.                         },  
  36.                         schema: {  
  37.                             model: {  
  38.                                 id: "value",  
  39.                                 children: "items"  
  40.                             }  
  41.                         }  
  42.                     });  
  43.   
  44.                 $("#treeview").kendoTreeView({  
  45.                     dataSource: homogeneous,  
  46.                     dataTextField: ["name"],  
  47.                     checkboxes: {  
  48.                         checkChildren: true  
  49.                     },    
  50.                     dataBound: function (e)  
  51.                     {  
  52.                         var treeView = $('#treeview').data('kendoTreeView');  
  53.                         treeView.expand(".k-item");  
  54.                     }  
  55.             });  
  56.   
  57.                  
  58.         </script>  
  59.     </div>  
  60. </body>  
  61. </html>  
Result

 
Figure 2: Kendo Tree View with checkboxes

From the above figure, you can notice that as soon as child node status changes, it will reflect to the topmost parent node.

Fetching the data based on checkbox selection in TreeView node

The data of the checked node can be fetched by checking event in kendo TreeView.

KendoTreeView.html
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>   
  4.     <style>  
  5.         html {  
  6.             font-size: 14px;  
  7.             font-family: Arial, Helvetica, sans-serif;  
  8.         }  
  9.     </style>  
  10.     <title></title>  
  11.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common-material.min.css" />  
  12.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.min.css" />  
  13.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.mobile.min.css" />  
  14.   
  15.     <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>  
  16.     <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>  
  17. </head>  
  18. <body>  
  19.     <div id="example">  
  20.         <div class="demo-section k-content">  
  21.             <div class="k-content">  
  22.                 <h4> Kendo Tree View</h4>  
  23.   
  24.             </div>  
  25.   
  26.             <div id="treeview"></div>  
  27.             <div>  
  28.                 <p id="result">No nodes checked.</p>  
  29.             </div> 
  30.         </div>  
  31.         <script>  
  32.                     homogeneous = new kendo.data.HierarchicalDataSource({  
  33.                         transport: {  
  34.                             read: {  
  35.                                 url: "http://github-ci-staging.azurewebsites.net/api/Automobiles/DataSource",  
  36.                                 dataType: "json"  
  37.                             }  
  38.                         },  
  39.                         schema: {  
  40.                             model: {  
  41.                                 id: "value",  
  42.                                 children: "items"  
  43.                             }  
  44.                         }  
  45.                     });  
  46.   
  47.                 $("#treeview").kendoTreeView({  
  48.                     dataSource: homogeneous,  
  49.                     dataTextField: ["name"],  
  50.                     checkboxes: {  
  51.                         checkChildren: true  
  52.                     },  
  53.                     check: onCheck,  
  54.                     dataBound: function (e)  
  55.                     {  
  56.                         var treeView = $('#treeview').data('kendoTreeView');  
  57.                         treeView.expand(".k-item");  
  58.                     }  
  59.             });  
  60.   
  61.                 function checkedNodeIds(nodes, checkedNodes) {  
  62.                     for (var i = 0; i < nodes.length; i++) {  
  63.                         if (nodes[i].checked) {  
  64.                             checkedNodes.push(nodes[i].id);  
  65.   
  66.                         }  
  67.   
  68.                         if (nodes[i].hasChildren) {  
  69.                             checkedNodeIds(nodes[i].children.view(), checkedNodes);  
  70.                         }  
  71.                     }  
  72.                 }  
  73.   
  74.                 // show checked node IDs on datasource change  
  75.                 function onCheck() {  
  76.                     var checkedNodes = [],  
  77.                         treeView = $("#treeview").data("kendoTreeView"),  
  78.                         message;  
  79.   
  80.                     checkedNodeIds(treeView.dataSource.view(), checkedNodes);  
  81.   
  82.                     if (checkedNodes.length > 0) {  
  83.                         message = "IDs of checked nodes: " + checkedNodes.join(",");  
  84.                     } else {  
  85.                         message = "No nodes checked.";  
  86.                     }  
  87.   
  88.                     $("#result").html(message);  
  89.                 }  
  90.   
  91.                  
  92.         </script>  
  93.     </div>  
  94. </body>  
  95. </html>  
onCheck Event

Whenever the checkbox status changes, this event will get fired and the node's ids are saved in the checkedNodes array.
 
Result
  
Figure 3  

Modify the below checkedNodeIds function to get the other data; in my case, I tried to fetch the name of the node.

  1. function checkedNodeIds(nodes, checkedNodes) {  
  2.                    for (var i = 0; i < nodes.length; i++) {  
  3.                        if (nodes[i].checked) {  
  4.                            checkedNodes.push(nodes[i].name);  
  5.   
  6.                        }  
  7.   
  8.                        if (nodes[i].hasChildren) {  
  9.                            checkedNodeIds(nodes[i].children.view(), checkedNodes);  
  10.                        }  
  11.                    }  
  12.                }  

Result

Figure 4 

Conclusion

We have seen how to implement the checkboxes and fetch the node details based on the checkbox status change in the Kendo TreeView. We will see more about the Kendo TreeView templates in my future articles.

The above-mentioned API is deployed and available for use here. Download the source code from GitHub.

Reference

https://demos.telerik.com/jsp-ui/treeview/checkboxes

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

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