Kendo UI Click To Check TreeView

Click a TreeView item to check its checkbox

by marhaba

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>
<hr/>
<button id="clickme">Click Me</button>
<div id="results">
    <h4>Checked Items</h4>
    <ul></ul>
</div>

JavaScript

// getChecked Method
// -----------------

kendo.ui.TreeView.prototype.getCheckedItems = (function(){

  function getCheckedItems(){
    var nodes = this.dataSource.view();
    return getCheckedNodes(nodes);
  }

  function getCheckedNodes(nodes){
    var node, childCheckedNodes;
    var checkedNodes = [];

    for (var i = 0; i < nodes.length; i++) {
      node = nodes[i];
      if (node.checked) {
        checkedNodes.push(node);
      }
        
      // to understand recursion, first
      // you must understand recursion
      if (node.hasChildren) {
        childCheckedNodes = getCheckedNodes(node.children.view());
        if (childCheckedNodes.length > 0){
          checkedNodes = checkedNodes.concat(childCheckedNodes);
        }
      }

    }

    return checkedNodes;
  }

  return getCheckedItems;
})();


// Hierarchical data source
// ------------------------

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

    ]
});

// Treeview configuration
// ----------------------

var treeview = $("#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);
  }
}).data("kendoTreeView");

// Button handler
// --------------

$("#clickme").click(function(e){
    e.preventDefault();
    var $res =...