kendoGrid - constructor

Declare grid in constructor code, template uses data-bind elements, but html elements will not bind to row data?

by jwstott

HTML

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

<script id="row-template" type="text/x-kendo-template">
    #tmpCount++;
    console.log(kendo.format('template iteration: {0}',tmpCount));
    #
      <tr class="k-grid-edit-row">
      <td>

      <input class='k-textbox' data-bind='value: Name, events: { focus: focusHandler }' />
      </td>
      <td>
      <input class='k-textbox' data-bind="value: Price, events: { focus: focusHandler }"/>
      </td>
      <td>
      <input class='k-textbox' data-bind="value: UnitsInStock, events: { focus: focusHandler }" />
      </td>
      </tr>
</script>
<br/>
<pre data-bind="text: displayGridSource"></pre>

JavaScript

var tmpCount = 0;
var viewModel = kendo.observable({
    focusHandler: function(e) {
        var item = e.data;
        console.log(this.get("gridSource").indexOf(item));
        this.displayGridSource();
    },
    gridSource: [
        {
        Name: "1Chai",
        Price: 18.00,
        UnitsInStock: 39},
    {
        Name: "2Chai",
        Price: 18.00,
        UnitsInStock: 39},
    {
        Name: "3Chai",
        Price: 18.00,
        UnitsInStock: 39},
    {
        Name: "4Chai",
        Price: 18.00,
        UnitsInStock: 39},
    {
        Name: "5Chai",
        Price: 18.00,
        UnitsInStock: 39}
    ],
    displayGridSource: function() {
        var gridSource1 = this.get("gridSource");
        return $.map(gridSource1, function(product) {
            return "\t" + kendo.stringify(product);
        }).join(",\r\n");
    }
});
$('#grid').kendoGrid({
    dataSource: {
        data: viewModel.gridSource,
        pageSize: 10
    },
    groupable: false,
    sortable: false,
    pageable: true,
    rowTemplate: kendo.template($("#row-template").html()),
    columns: [{
        field: "Name",
        title: "Name"},
    {
        field: "Price",
        title: "Price"},
    {
        field: "UnitsInStock",
        title: "UnitsInStock"}
                                                                                                                                             ]

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