Kendo UI TreeList

HTML

<script src="http://kendo.cdn.telerik.com/2015.2.624/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.624/styles/kendo.mobile.all.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.624/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.624/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.624/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.624/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.624/styles/kendo.common.min.css">
<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<h4>First instance, without parameters</h4>
<input type="button" id="binddata" value="binddata"/>
<div id="treelist"></div>
 <script id="chk-template" type="text/x-kendo-template">
           <input type='checkbox' name='hc_#= parentId #' id='ck#= id #' data-parent='#= parentId #' data-id="#= id #"/>
              
 </script>
 <script id="hc-template" type="text/x-kendo-template">
          #: Name#
 </script>

JavaScript

var dataSource = new kendo.data.TreeListDataSource({
		  data: [
			{ id:  1, Name: "HC1", parentId: null },
			{ id:  2, Name: "HC2", parentId: null },
			{ id:  3, Name: "RC1", parentId: 1 },
			{ id:  4, Name: "RC2", parentId: 1 },
            { id:  14, Name: "RC12", parentId: 1 },
			{ id:  5, Name: "HC3", parentId: null },
			{ id:  6, Name: "RC1", parentId: 5 },
			{ id:  7, Name: "RC2", parentId: 5 },
            { id:  8, Name: "HC3", parentId: null },
			{ id:  9, Name: "RC1", parentId: 8 },
			{ id:  10, Name: "RC2", parentId: 8 }
		  ]
		});

		$('#binddata').click(function(){
    console.log('called');
    kendo.destroy("#treelist");
    	$('#treelist').empty();
    	binddata();
    })
	
		function binddata(){
      $("#treelist").kendoTreeList({
          dataSource: dataSource,
          height: 200,
          columns: [
          { template: $("#chk-template").html() , width: 32 ,headerTemplate: '<input type="checkbox" id="check-all" />'},
          { field: "Name", expandable: true,template: $("#hc-template").html()},
          { field: "NearDue",template: "<input type='checkbox'  />", width: 100 },
          { field: "OverDue",template: "<input type='checkbox'  />", width: 100 }
          ],
          editable: {
                            move: true
                          },
          dataBound: function() {
          var view = this.dataSource.view();
          this.items().each(function(index, row) {
            kendo.bind(row, view[index]);
          });
          }
      });
    }

   function checkboxChanged() {
    var $this = $(this),
        id=($this.attr("data-id"));
        checked = $this.prop("checked"),
        strName = $this.attr("name"),
        childrens = $('input[data-parent="'+id+'"]'),
        isRoot = false;
       if($this.attr("id") == "check-all"){
         childrens =$(":checkbox[data-parent]") ;
           isRoot = true;
       };
      $this.parent()
      .removeClass('custom-checked custom-unchecked...