Kendo ui Grid rowTemplate with textbox not working when applying kendoGrid

Question

Please have a look at http://jsfiddle.net/43Nh9/2/

row template is working when using declarative approach but when i initialize a div to kendo Grid it doesn't work for text box. Help me getting this work.

here is my code

<div id="grid" data-role="grid" data-editable="inline" data-bind="source: data" data-row-template="row-template"></div>

   <script id="row-template" type="text/x-kendo-template">
   <tr class="k-grid-edit-row" data-uid="#= uid #">
      <td>
      <input class='k-textbox' data-bind="value:Name" />
      </td>
      <td>
          <span>#:Name#</span>
      </td>

      </tr>
   </script>

var viewModel = kendo.observable({

    data: [{
        Name: "1Chai",
        Price: 18.00
    }, {
        Name: "2Chai",
        Price: 18.00
    }, {
        Name: "3Chai",
        Price: 18.00
    }, {
        Name: "4Chai",
        Price: 18.00
    }, {
        Name: "5Chai",
        Price: 18.00
    }, ]

});

kendo.bind(document.body, viewModel);


var grid = $("#grid2").kendoGrid({
    dataSource: {
        data: [{
            Name: "1Chai",
            Price: 18.00
        }, {
            Name: "2Chai",
            Price: 18.00
        }, {
            Name: "3Chai",
            Price: 18.00
        }, {
            Name: "4Chai",
            Price: 18.00
        }, {
            Name: "5Chai",
            Price: 18.00
        }, ]

    },

    rowTemplate: kendo.template($("#row-template").html())

}).data("kendoGrid");

Thanks in advance.

Answer 1

You will need to manually bind the row models to the TR elements of the Grid. You can do this in the dataBound event handler.

e.g.

dataBound: function(){
    var grid = this;
    this.tbody.find('tr').each(function(){
       var tr = $(this);
       kendo.bind(tr, grid.dataItem(tr));
    })
},

Fiddle