Kendo ui Grid rowTemplate with textbox not working when applying kendoGrid - user-interface

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