JQuery

Drag And Drop In Kendo Tree View

Introduction

In my last article, I explained how to do remote data binding in Kendo TreeView. In this blog, I’m going to explain how to implement the drag and drop in it. 

Kendo Tree View with remote databinding

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].name);  
  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>  
The kendo TreeView binding is done by the reponse of http://github-ci-staging.azurewebsites.net/api/Automobiles/DataSource -  REST API 
 
Result in Browser 

Drag and drop in kendo TreeView

To enable the drag and drop in Kendo TreeView, make the DragAndDrop attribute true.

KendoTreeView.cshtml 
  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.                     dragAndDrop: true,  
  50.                     dataTextField: ["name"],  
  51.                     checkboxes: {  
  52.                         checkChildren: true  
  53.                     },  
  54.                     check: onCheck,  
  55.                     dataBound: function (e)  
  56.                     {  
  57.                         var treeView = $('#treeview').data('kendoTreeView');  
  58.                         treeView.expand(".k-item");  
  59.                     }  
  60.             });  
  61.                   
  62.                 function checkedNodeIds(nodes, checkedNodes) {  
  63.                     for (var i = 0; i < nodes.length; i++) {  
  64.                         if (nodes[i].checked) {  
  65.                             checkedNodes.push(nodes[i].name);  
  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.                     var checkedNodes = [],  
  78.                         treeView = $("#treeview").data("kendoTreeView"),  
  79.                         message;  
  80.   
  81.                     checkedNodeIds(treeView.dataSource.view(), checkedNodes);  
  82.   
  83.                     if (checkedNodes.length > 0) {  
  84.                         message = "IDs of checked nodes: " + checkedNodes.join(",");  
  85.                     } else {  
  86.                         message = "No nodes checked.";  
  87.                     }  
  88.   
  89.                     $("#result").html(message);  
  90.                 }  
  91.   
  92.                  
  93.         </script>  
  94.     </div>  
  95. </body>  
  96. </html>  
Result in browser 
 
While Dragging 
 
 
After Drop 
 

I hope you have learned from this blog. Your valuable feedback, questions, or comments about this article 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