Kendo UI Grid Detail Template MVVM Binding

By default, the Kendo Grid will not allow you to use MVVM binding within a detail template. This detailInit code will enable binding.

by siliconsoul

HTML

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

<div id="detail-grid"></div>

<script id="detail-template" type="text/x-kendo-template">
    <div>
        <span>Is Human</span>
        <input type="checkbox" data-bind="checked: human" />
    </div>
</script>

JavaScript

var ds = new kendo.data.DataSource({
  data: [
      {name: "Joe", human: true}, 
      {name: "Sally", human: true},
      {name: "Bill", human: true}
  ]
});

var scholarGrid = $("#demo-grid").kendoGrid({
    filterable: false,
    dataSource: ds,
    detailTemplate: kendo.template($("#detail-template").html()),
    detailInit: function(e) {
        // without this line, detail template bindings will not work
        kendo.bind(e.detailRow, e.data);
    }
}).data("kendoGrid");