Bind events within Kendo grid

Question

I need to bind some events on the grid row and details view. I'm using an observable view model with some events registered and trying to bind them to the DOM using row template and details templates. So far no progress.

$("#grid").kendoGrid({
    sortable:true,
    rowTemplate:'<tr class="k-master-row"> 
         <td class="k-hierarchy-cell"><a class="k-icon k-plus" href=""></a></td>
        <td><a data-bind:"click:highlight">click in row ${id}</a></td><td>${bool}</td>
    </tr>',
    detailTemplate:'<a data-bind:"click:highlight">click In details ${id}</a>',
    columns: [{field:'id',sortable:false}, {field:'bool'}],
    dataBound: function(e) {
      var grid=$("#grid").data('kendoGrid');
      grid.expandRow("tr.k-master-row");
    }
});


var model=( {
    highlight:function(){
       console.log(this.id);
    },
   items:[{id: 1123, bool: true}, {id: 223, bool: false}]
});
kendo.bind($("#grid"),kendo.observable(model));

Here is the jsFiddle http://jsfiddle.net/amGmr/9/ . Is there any possibility to bind events withing the grid using MVVM ?

Answer 1

You should specify the events you wish to bind to via the data-bind attribute and the events binding:

<div data-role="grid" 
     data-bind="source: dataSource, events:{dataBound: dataBound, detailInit: detailInit}"
></div>

<script>
var viewModel = kendo.observable({
   dataBound: function(e) {
      var grid = e.sender; // `this` is the viewModel instance
   },
   detailInit: function(e) {
       var grid = e.sender; // `this` is the viewModel instance
   },
   dataSource: [ 
      { name: "John Doe" },
      { name: "Jane Doe" }
   ]
});
</script>