data-bind not working in kendo.template - asp.net-mvc

Question

I'm having troubles trying to implement a custom remove button in my Kendo Grid. This is the code I have:
View:
<div id="gridAdditionalLines">
Javascript:
var dataSourceGrid = new kendo.data.DataSource({
data: MyData, --> It's a type of Kendo.Observable
schema: {
model: {
Id: "Id",
fields: {
Id: { editable: false, nullable: true },
Column1: { editable: false, nullable: true },
Description: { validation: { required: true} },
Value: { validation: { required: true} }
}
}
}
});
$("#MyGrid").kendoGrid({
dataSource: dataSourceGrid,
editable: true,
navigatable: true,
toolbar: ["create"],
columns: [
{ field: "Description" },
{ field: "Value" },
{ command: [{name: "destroy", template: kendo.template($("#DeleteTemplate").html())}], width: 60}
]
});
This is the template I'm using for the remove button for each row:
<script type="text/x-kendo-template" id="DeleteTemplate">
<button class="btn btn-default" data-bind="click: Applicability.deleteLine">
<span class="glyphicon glyphicon-remove"></span>
</button>
With the code above, the Kendro Grid display the data properly. However, when trying to remove any row, at the moment to click in the Remove button, nothing happens.
do I missing something?

Answer 1

It has been a little while since I used Kendo, but if I remember correctly, since the grid itself is not MVVM bound, none of its child elements (including the rendered template) will be checked for MVVM data-bind attributes either.
If your grid was initialized with MVVM using data-role="grid" then I think the templates would be bound too.
I forget exactly how to do it, but I believe when the grid triggers its dataBound event, you can manually call kendo.bind(...) on the grid's child elements to get them to MVVM bind.

Answer 2

Your function for button click is missing here. Once you add this script a button is added to the grid, but what happens when you click on button is not specified
<script type="text/x-kendo-template" id="DeleteTemplate">
<button class="btn btn-default" data-bind="click: Applicability.deleteLine">
<span class="glyphicon glyphicon-remove"></span>
</button>
Then you have to add an onclick function for the button:
$('.btn.btn-default').on('click', function() {
var grid = $("#grid").data("kendoGrid");
var dataItem = grid.dataItem($(this).closest("tr"));
if(confirm('Are you sure you want to delete : ' + dataItem.name)) {
grid.dataSource.remove(dataItem);
grid.dataSource.sync();
grid.refresh();
}
});
Check jsbin here