<!DOCTYPE html>
<html>

<head>
  <link data-require="kendoUI@*" data-semver="2016.2.504" rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.common.min.css" />
  <link data-require="kendoUI@*" data-semver="2016.2.504" rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.default.min.css" />
  <script data-require="kendoUI@*" data-semver="2016.2.504" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <script data-require="kendoUI@*" data-semver="2016.2.504" src="//kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>

  <link rel="stylesheet" href="StoreNet.Insights.StoreHierarchy.css" />
</head>

<body>
  <h1>Hello Plunker!</h1>
  <!-- song for athene -->

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

  <script src="StoreNet.Insights.StoreHierarchy.js"></script>
</body>

</html>
// Code goes here

(function(){
'use strict'
$(document).ready(function() {
  $("#treeview").kendoTreeView({
    checkboxes: {
      checkChildren: true

    },

    check: onCheck,
    loadOnDemand: true,
    dataSource: [{
      expanded: true,
      text: "Disctrict 1",
      items: [{
        text: "Store 1",
        checked: {
          from: "Checked",
          type: "boolean"
        }
      }, {
        text: "Store 2",
        checked: {
          from: "Checked",
          type: "boolean"
        }
      }],

      checked: {
        from: "Checked",
        type: "boolean"
      }
    }]

  });

    function onCheck(e) {

      var treeView = $("#treeview").data("kendoTreeView");
      var nodes = treeView.dataSource.view();
      manageCheckedNodes(nodes);

    }

    function manageCheckedNodes(nodes) {
      for (var i = 0; i < nodes.length; i++) {
        var node = nodes[i];

        if (node.checked) {
          console.log(node.text + ' is checked');
        } else {
          console.log(node.text + ' is unchecked');
        }

        if (node.hasChildren) {
          manageCheckedNodes(node.children.view());
        }

      }
    }
    
});
}());
/* Styles go here */

 #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;
    }