This is a migrated thread and some comments may be shown as answers.

Parent node checked only when expand (using SetDataSource)

1 Answer 229 Views

TreeView

This is a migrated thread and some comments may be shown as answers.

Roberto asked on 05 May 2016, 02:28 PM

Example of this problem in Dojo

How to resolve?

<!DOCTYPE html>

<html>

<head>

<base href="http://demos.telerik.com/kendo-ui/treeview/checkboxes">

<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>

<title></title>

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.common-bootstrap.min.css" />

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.bootstrap.min.css" />

<script src="//kendo.cdn.telerik.com/2016.2.504/js/jquery.min.js"></script>

<script src="//kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>

</head>

<body>

<div id="example">

<div class="demo-section k-content">

<div>

<h4>Check nodes</h4>

<div id="treeview"></div>

</div>

<div style="padding-top: 2em;">

<h4>Status</h4>

<p id="result">No nodes checked.</p>

</div>

<script>

$("#treeview").kendoTreeView({

checkboxes: {

checkChildren: true

},

check: onCheck

});

$("#treeview").data("kendoTreeView").setDataSource([{

id: 9, text: "Reports", spriteCssClass: "folder", items: [

{ id: 10, text: "February.pdf",checked:true, spriteCssClass: "pdf" },

{ id: 11, text: "March.pdf", spriteCssClass: "pdf" },

{ id: 12, text: "April.pdf", spriteCssClass: "pdf" }

]

}]);

// function that gathers IDs of checked nodes

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>

<style>

#treeview .k-sprite {

background-image: url("../content/web/treeview/coloricons-sprite.png");

}

.rootfolder { background-position: 0 0; }

.folder { background-position: 0 -16px; }

.pdf { background-position: 0 -32px; }

.html { background-position: 0 -48px; }

.image { background-position: 0 -64px; }

</style>

</div>

</body>

</html>

Parent node checked only when expand (using SetDataSource)

1 Answer, 1 is accepted