kendoGrid - declaritive

Declare grid in html element, row template uses data-bind elements and works. Negative effect is every change of cell data causes grid to rebind?

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" data-role="grid" data-sortable="true" data-pageable="true"  data-bind="source: gridSource" data-row-template="row-template"></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");
    }
});
kendo.init($('#grid'));
kendo.bind(document.body, viewModel);