JQuery

Expand Particular Node In Kendo Tree View By Button Click

Introduction

In my last blog, I explained how to expand all the nodes in Kendo Tree View on load. In this blog, I’m going to explain how to expand a particular node in Kendo Tree View via a button click.

Kendo Tree View with remote data binding

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.                 <button id="btnAuto" class="k-button">Expand</button>  
  29.             </div>  
  30.             <!--<div>  
  31.                 <p id="result">No nodes checked.</p>  
  32.             </div>-->  
  33.         </div>  
  34.         <script>  
  35.                     homogeneous = new kendo.data.HierarchicalDataSource({  
  36.                         transport: {  
  37.                             read: {  
  38.                                 url: "http://github-ci-staging.azurewebsites.net/api/Automobiles/DataSource",  
  39.                                 dataType: "json"  
  40.                             }  
  41.                         },  
  42.                         schema: {  
  43.                             model: {  
  44.                                 id: "value",  
  45.                                 children: "items"  
  46.                             }  
  47.                         }  
  48.                     });  
  49.   
  50.                 $("#treeview").kendoTreeView({  
  51.                     dataSource: homogeneous,  
  52.                     dragAndDrop: true,  
  53.                     dataTextField: ["name"],  
  54.                     checkboxes: {  
  55.                         checkChildren: true  
  56.                     },  
  57.                     check: onCheck,  
  58.                  
  59.             });  
  60.                   
  61.                 function checkedNodeIds(nodes, checkedNodes) {  
  62.                     debugger;  
  63.                     for (var i = 0; i < nodes.length; i++) {  
  64.                         if (nodes[i].name =="Automobiles") {  
  65.                             checkedNodes.push(nodes[i].data);  
  66.   
  67.                         }  
  68.   
  69.                         if (nodes[i].hasChildren) {  
  70.                             checkedNodeIds(nodes[i].children.view(), checkedNodes);  
  71.                         }  
  72.                     }  
  73.                 }  
  74.   
  75.                 // show checked node IDs on datasource change  
  76.                 function onCheck()  
  77.                 {  
  78.                     var checkedNodes = [],  
  79.                         treeView = $("#treeview").data("kendoTreeView"),  
  80.                         message;  
  81.   
  82.                     checkedNodeIds(treeView.dataSource.view(), checkedNodes);  
  83.   
  84.                     if (checkedNodes.length > 0) {  
  85.                         message = "IDs of checked nodes: " + checkedNodes.join(",");  
  86.                     } else {  
  87.                         message = "No nodes checked.";  
  88.                     }  
  89.   
  90.                     $("#result").html(message);  
  91.                 }  
  92.                  
  93.         </script>  
  94.     </div>  
  95. </body>  
  96. </html>  
The Kendo TreeView binding is done by the reponse of http://github-ci-staging.azurewebsites.net/api/Automobiles/DataSource - REST API

Result in Browser

      Figure 1 
  
After expanding all the nodes.
 
                  Figure 2

Expand particular node
 
Let's have a button to force the particular node to expand in the Tree View. In my last blog, we have seen how to expand all the nodes in Kendo Tree View using a databound event. Now, in this blog, you will learn how to expand a particular node in kendo TreeView using external events.  
 
From the figure 2, you can notice the autombile's node consist of two immediate children, so now let's expand only bus node from the automobiles from the external event. 
  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.                 <button id="btnAuto" class="k-button">Expand</button>  
  29.             </div>  
  30.             <!--<div>  
  31.                 <p id="result">No nodes checked.</p>  
  32.             </div>-->  
  33.         </div>  
  34.         <script>  
  35.                     homogeneous = new kendo.data.HierarchicalDataSource({  
  36.                         transport: {  
  37.                             read: {  
  38.                                 url: "http://github-ci-staging.azurewebsites.net/api/Automobiles/DataSource",  
  39.                                 dataType: "json"  
  40.                             }  
  41.                         },  
  42.                         schema: {  
  43.                             model: {  
  44.                                 id: "value",  
  45.                                 children: "items"  
  46.                             }  
  47.                         }  
  48.                     });  
  49.   
  50.                 $("#treeview").kendoTreeView({  
  51.                     dataSource: homogeneous,  
  52.                     dragAndDrop: true,  
  53.                     dataTextField: ["name"],  
  54.                     checkboxes: {  
  55.                         checkChildren: true  
  56.                     },  
  57.                     check: onCheck,  
  58.                    
  59.             });  
  60.                   
  61.                 function checkedNodeIds(nodes, checkedNodes) {  
  62.                     debugger;  
  63.                     for (var i = 0; i < nodes.length; i++) {  
  64.                         if (nodes[i].name =="Automobiles") {  
  65.                             checkedNodes.push(nodes[i].data);  
  66.   
  67.                         }  
  68.   
  69.                         if (nodes[i].hasChildren) {  
  70.                             checkedNodeIds(nodes[i].children.view(), checkedNodes);  
  71.                         }  
  72.                     }  
  73.                 }  
  74.   
  75.                 // show checked node IDs on datasource change  
  76.                 function onCheck()  
  77.                 {  
  78.                     var checkedNodes = [],  
  79.                         treeView = $("#treeview").data("kendoTreeView"),  
  80.                         message;  
  81.   
  82.                     checkedNodeIds(treeView.dataSource.view(), checkedNodes);  
  83.   
  84.                     if (checkedNodes.length > 0) {  
  85.                         message = "IDs of checked nodes: " + checkedNodes.join(",");  
  86.                     } else {  
  87.                         message = "No nodes checked.";  
  88.                     }  
  89.   
  90.                     $("#result").html(message);  
  91.                 }  
  92.                 $('#btnAuto').click(function () {  
  93.                      
  94.                     var treeview = $('#treeview').data('kendoTreeView');  
  95.                     var nodeElement = treeview.dataSource.view();  
  96.                     for (var i = 0; i < nodeElement.length; i++) {  
  97.                         if (nodeElement[i].name == "Automobiles") {  
  98.                             var u_id = nodeElement[i].uid;  
  99.                             var nodeElement_test = $("#treeview").find('li[data-uid=' + u_id + ']');  
  100.                             var node = treeview.findByUid(u_id);  
  101.                             treeview.expand(node);  
  102.                             if (nodeElement[i].hasChildren) {  
  103.                                 childNodeExpand(nodeElement[i].children.view());  
  104.                             }  
  105.                         }  
  106.                     }  
  107.                 });  
  108.   
  109.                 function childNodeExpand(childNodes) {  
  110.                    
  111.                     var treeview = $('#treeview').data('kendoTreeView');  
  112.                     for (var i = 0; i < childNodes.length; i++) {  
  113.                         if (childNodes[i].name == "Bus") {  
  114.                             var u_id = childNodes[i].uid;  
  115.                             var nodeElement_test = $("#treeview").find('li[data-uid=' + u_id + ']');  
  116.                             var node = treeview.findByUid(u_id);  
  117.                             treeview.expand(node);  
  118.                         }  
  119.                     }  
  120.                 }  
  121.         </script>  
  122.     </div>  
  123. </body>  
  124. </html>  
I have added a button, so when you click on button the click event will get fired where we have written a logic where the bus node will get expanded.  
 
Expanding the node is done by the expand function of the Kendo tree view,  where we need to pass the node information which should be expanded as per our requirement. 
 
I'm getting the node information based on UID which will be unique for all the nodes. 
 
By clicking on expand button the bus node will get expanded. 
 
Result 
     Figure 3
 
Click on Expand button to expand the bus node 
 
        Figure 4 
 
I hope you have learned from this blog. Your valuable feedback, questions, or comments about this blog are always welcome.

Download the source code from GitHub.
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