Post
Ask Question

Expand The Nodes Of Kendo Tree View In Initial Loading

Introduction

While loading the Kendo TreeView, the parent and child node will not be expanded by default. In this blog, we are going to see how to expand all nodes programmatically while loading the TreeView.

Kendo Tree View with remote data binding

I’m going to use the API (http://github-ci-staging.azurewebsites.net/api/Automobiles/DataSource) which is developed using ASP.NET CORE API as a data source for kendo TreeView.

Testing the API in PostMan.

Figure 1

Yes, we got a complex JSON object to construct the treeview.

Create a new HTML page. In my case, I named it as KendoTreeView.html.

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.                   
  48.             });  
  49.   
  50.                  
  51.         </script>  
  52.     </div>  
  53. </body>  
  54. </html>  

Result

Figure 2

To expand the treeview, we need to use the expand function after loading the data into 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.         <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.                     dataBound: function (e)  
  48.                     {  
  49.                         var treeView = $('#treeview').data('kendoTreeView');  
  50.                         treeView.expand(".k-item");  
  51.                     }  
  52.             });  
  53.   
  54.                  
  55.         </script>  
  56.     </div>  
  57. </body>  
  58. </html>  

From the above code, you will notice that in the databound event, we are calling the Expand function to expand all the nodes in TreeView programmatically.

Reference
  • https://docs.telerik.com/kendo-ui/api/javascript/ui/treeview
I hope you have learned from this blog. Your valuable feedback, questions, or comments about this article are always welcome.
Next Recommended Reading Menu And Items With Expand And Collapse View Using jQuery