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
- <!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/2017.3.1026/styles/kendo.common-material.min.css" />
- <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.min.css" />
- <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.mobile.min.css" />
-
- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
- </head>
- <body>
- <div id="example">
- <div class="demo-section k-content">
- <div class="k-content">
- <h4> Kendo Tree View</h4>
-
- </div>
-
- <div id="treeview"></div>
- <!--<div>
- <p id="result">No nodes checked.</p>
- </div>-->
- </div>
- <script>
- homogeneous = new kendo.data.HierarchicalDataSource({
- transport: {
- read: {
- url: "http://github-ci-staging.azurewebsites.net/api/Automobiles/DataSource",
- dataType: "json"
- }
- },
- schema: {
- model: {
- id: "value",
- children: "items"
- }
- }
- });
-
- $("#treeview").kendoTreeView({
- dataSource: homogeneous,
- dataTextField: ["name"],
- checkboxes: {
- checkChildren: true
- },
- check: onCheck,
- dataBound: function (e)
- {
- var treeView = $('#treeview').data('kendoTreeView');
- treeView.expand(".k-item");
- }
- });
-
- function checkedNodeIds(nodes, checkedNodes) {
- for (var i = 0; i < nodes.length; i++) {
- if (nodes[i].checked) {
- checkedNodes.push(nodes[i].name);
-
- }
-
- if (nodes[i].hasChildren) {
- checkedNodeIds(nodes[i].children.view(), checkedNodes);
- }
- }
- }
-
-
- function onCheck() {
- var checkedNodes = [],
- treeView = $("#treeview").data("kendoTreeView"),
- message;
-
- checkedNodeIds(treeView.dataSource.view(), checkedNodes);
-
- if (checkedNodes.length > 0) {
- message = "IDs of checked nodes: " + checkedNodes.join(",");
- } else {
- message = "No nodes checked.";
- }
-
- $("#result").html(message);
- }
-
-
- </script>
- </div>
- </body>
- </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
- <!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/2017.3.1026/styles/kendo.common-material.min.css" />
- <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.min.css" />
- <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.mobile.min.css" />
-
- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
- </head>
- <body>
- <div id="example">
- <div class="demo-section k-content">
- <div class="k-content">
- <h4> Kendo Tree View</h4>
-
- </div>
-
- <div id="treeview"></div>
- <!--<div>
- <p id="result">No nodes checked.</p>
- </div>-->
- </div>
- <script>
- homogeneous = new kendo.data.HierarchicalDataSource({
- transport: {
- read: {
- url: "http://github-ci-staging.azurewebsites.net/api/Automobiles/DataSource",
- dataType: "json"
- }
- },
- schema: {
- model: {
- id: "value",
- children: "items"
- }
- }
- });
-
- $("#treeview").kendoTreeView({
- dataSource: homogeneous,
- dragAndDrop: true,
- dataTextField: ["name"],
- checkboxes: {
- checkChildren: true
- },
- check: onCheck,
- dataBound: function (e)
- {
- var treeView = $('#treeview').data('kendoTreeView');
- treeView.expand(".k-item");
- }
- });
-
- function checkedNodeIds(nodes, checkedNodes) {
- for (var i = 0; i < nodes.length; i++) {
- if (nodes[i].checked) {
- checkedNodes.push(nodes[i].name);
-
- }
-
- if (nodes[i].hasChildren) {
- checkedNodeIds(nodes[i].children.view(), checkedNodes);
- }
- }
- }
-
-
- function onCheck() {
- var checkedNodes = [],
- treeView = $("#treeview").data("kendoTreeView"),
- message;
-
- checkedNodeIds(treeView.dataSource.view(), checkedNodes);
-
- if (checkedNodes.length > 0) {
- message = "IDs of checked nodes: " + checkedNodes.join(",");
- } else {
- message = "No nodes checked.";
- }
-
- $("#result").html(message);
- }
-
-
- </script>
- </div>
- </body>
- </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.