在 Kendo 网格中绑定事件

Posted 2023-05-07

【中文标题】在 Kendo 网格中绑定事件

【英文标题】：Bind events within Kendo grid

【发布时间】：2013-05-30 11:07:18

【问题描述】：

我需要在网格行和详细信息视图上绑定一些事件。我正在使用注册了一些事件的可观察视图模型，并尝试使用行模板和详细信息模板将它们绑定到 DOM。至今没有任何进展。

$("#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));

这里是 jsFiddle http://jsfiddle.net/amGmr/9/ 。是否有可能使用 MVVM 将事件与网格绑定？

【问题讨论】：

你知道怎么做吗？可以发一下答案吗？

【参考方案1】：

您应该通过 data-bind 属性和事件绑定来指定您希望绑定的事件：

<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>

【讨论】：

这对我使用 kendo v2015.2.805 不起作用我还尝试了在创建网格之前在选项上定义 dataBound 处理程序的非 mvvm 方式。

给定的解决方案不能解决 click:highlight 事件问题。