JSFiddle - React, Tailwind, and code Playground
by siliconsoul
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div class="container">
<div class="treeview-back ">
<div id="treeview"></div>
</div>
</div>
<div id="result"></div>
<script>
checkBoxClick = function(element){
setTimeout(function(){
$('#result').html('<br/>state: ' + element.checked);
});
}
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true,
template: "<input type='checkbox' value='false' onclick='checkBoxClick(this);'>",
},
dataSource: {
change: function(e){
if(e.action == "itemchange" && e.field == "checked"){
alert(e.items[0].checked);
}
},
data: [{
id: 1, text: "My Documents", expanded: true, items: [
{
id: 2, text: "Kendo UI Project", expanded: true, items: [
{ id: 3, text: "about.html" },
{ id: 4, text: "index.html"},
{ id: 5, text: "logo.png"}
]
},
{
id: 6, text: "New Web Site", expanded: true, items: [
{ id: 7, text: "mockup.jpg" },
{ id: 8, text: "Research.pdf"},
]
},
{
id: 9, text: "Reports",...