You need to sign in to do that
Don't have an account?
sharath T
I'm trying to create a treeview with checkbox using Kendo ui. how to display the checked checkboxes names or id's or values etc
Here is my code:
<apex:page >
<html>
<head>
<base href="https://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="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.112/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>
</div>
<script>
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
check: function(e) {
this.expandRoot = e.node;
this.expand($(this.expandRoot).find(".k-item").addBack());
},
dataSource: [{
id: 1, text: "All Companies", expanded: false, spriteCssClass: "rootfolder", items: [
{ id: 2, text: "Economical",spriteCssClass: "image" },
{ id: 3, text: "Perth",spriteCssClass: "folder" },
{ id: 4, text: "Waterloo",spriteCssClass: "folder" }
]
}],
});
// 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);
}
}
}
</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>
</apex:page>
<apex:page >
<html>
<head>
<base href="https://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="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.112/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>
</div>
<script>
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
check: function(e) {
this.expandRoot = e.node;
this.expand($(this.expandRoot).find(".k-item").addBack());
},
dataSource: [{
id: 1, text: "All Companies", expanded: false, spriteCssClass: "rootfolder", items: [
{ id: 2, text: "Economical",spriteCssClass: "image" },
{ id: 3, text: "Perth",spriteCssClass: "folder" },
{ id: 4, text: "Waterloo",spriteCssClass: "folder" }
]
}],
});
// 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);
}
}
}
</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>
</apex:page>