Grid Column Template Widget Binding
The Kendo grid does not bind/init column templates when using a remote data source.
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<div id="grid"></div>
JavaScript
(function () {
var test = function(){
return alert('test!!');
}
var viewModel = kendo.observable({
dataSource: new kendo.data.DataSource({
type: "json",
transport: {
read: {
url: '/echo/json/',
type: 'POST',
data: {
json: kendo.stringify([
{OrderID: 1, ItemName: 'Item 1'},
{OrderID: 2, ItemName: 'Item 2'},
{OrderID: 3, ItemName: 'Item 3'},
{OrderID: 4, ItemName: 'Item 4'},
{OrderID: 5, ItemName: 'Item 5'},
{OrderID: 6, ItemName: 'Item 6'},
{OrderID: 7, ItemName: 'Item 7'},
{OrderID: 8, ItemName: 'Item 8'},
]),
delay: 1}
}
}
}),
templateClicked: function (e) {
// This is not triggered. The data-bind click is not bound correctly.
debugger;
alert('clicked!');
}
});
var grid = $('#grid').kendoGrid({
dataSource: viewModel.dataSource,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field: "OrderID",
filterable: false
}, {
field: "ItemName",
title: "Item Name"
}, {
title: 'Actions',
template: '<input type="text" onblur="test()" data-bind="value: OrderID" />'
}],
dataBound: function(e) {
grid.tbody.find('tr').each(function(){
kendo.bind(this, grid.dataItem(this));
});
}
}).data('kendoGrid');
kendo.bind('body', viewModel);
})()