Kendo UI Click To Check TreeView

Click a TreeView item to check its checkbox

by derickbailey

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div id="my-treeview"></div>

JavaScript

var myDataSource = new kendo.data.HierarchicalDataSource({
    data: [
        {
            name: "foo", 
            items: [
                {name: "bar"},
                {name: "baz"}
            ]
        },
        {
            name: "bar", 
            items: [
                {name: "foo"},
                {name: "bar"}
            ]
        },
        {
            name: "baz", 
            items: [
                {name: "foo"},
                {name: "baz"}
            ]
        }

    ]
});

$("#my-treeview").kendoTreeView({
  dataSource: myDataSource,
  dataTextField: "name",

  // enable checkboxes
  checkboxes: true,

  // listen for item selection and
  // invert the checkbox state
  select: function(e){
    e.preventDefault();

    var checkbox = $(e.node).find(":checkbox");
    var checked = checkbox.prop("checked");
    checkbox.prop("checked", !checked);
  }
});