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.

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" data-role="grid"></div>

<script id="detail-template" type="text/x-kendo-template">
  <div>
    <span>Phone Number for #=name#:</span>
    <span data-bind="text: phone" />
    <input data-bind="value: phone" />
  </div>
</script>

JavaScript

var ds = new kendo.data.DataSource({
  data: [{
      name: "Joe",
      phone: "212-555-1234"
    },
    {
      name: "Sally",
      phone: "212-999-7785"
    },
    {
      name: "Bill",
      phone: "212-244-7035"
    }
  ]
});

var viewModel = kendo.observable({
  ds: ds
});

kendo.bind($(document.body), viewModel);