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

<!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>
<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"],
dataBound: function (e)
{
var treeView = $('#treeview').data('kendoTreeView');
treeView.expand(".k-item");
}
});
</script>
</div>
</body>
</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

<!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>
<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
},
dataBound: function (e)
{
var treeView = $('#treeview').data('kendoTreeView');
treeView.expand(".k-item");
}
});
</script>
</div>
</body>
</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

<!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].id);
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
// show checked node IDs on datasource change
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>

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.

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);
}
}
}

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.