Not able to bind click event in kendo mvvm row template - mvvm

Question

I have kendo grid with a button to remove the current item and for that grid I have a row template. Here is my HTML:
<div class="form-horizontal">
<table class="fixed-table-width"
data-role="grid"
data-bind="source: data"
data-scrollable="false"
data-row-template="row-template">
<thead>
<tr>
<th>Item</th>
<th></th>
</tr>
</thead>
</table>
</div>
<script type="text/x-kendo-tmpl" id="row-template">
<tr>
<td><span data-bind="text: item"></span></td>
<td><button class="link" data-bind="click: remove"><i class="icon-trash"></i> Remove</button></br ></td>
</tr>
</script>
And that is my model:
function AddItemComponent($scope) {
if ($scope === null || $scope === undefined) throw new Error("Unknown scope, please provide the scope");
var self = this;
self.itemModel = {
item: "Item to Remove",
remove: function(i) {
self.viewModel.items = self.viewModel.items.splice(i);
}
};
self.viewModel = kendo.observable({
items: []
});
self.viewModel.items.push(self.itemModel);
};
But when I open the modal with this HTML, I get the following error:
kendo.binder.min.js?cdv=40:25 Uncaught TypeError: t.get is not a function(…)
If I remove the data-bind from the click event, there is no error and it just works fine, so what is wrong?

Answer 1

What you are trying to achieve is better done with a commands column
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.command
data-columns="[{ field: 'item' }, { command: 'destroy' }]"
You don't neeed a row template anymore.
If you don't want to do this, try to wrap your itemModel in an observable, as get() is a method from kendo.data.ObservableObject
self.itemModel = kendo.observable({
item: "Item to Remove",
remove: function(i) {
self.viewModel.items = self.viewModel.items.splice(i);
}
});