data-bind not working in kendo.template

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