Kendo MVVM Grid - 如何响应行点击事件？

Posted 2023-05-07

【中文标题】Kendo MVVM Grid - 如何响应行点击事件？

【英文标题】：Kendo MVVM Grid - How to respond to row click event?

【发布时间】：2014-08-30 17:14:21

【问题描述】：

我有以下 Kendo MVVM 网格：

    <div>
        <div id="systemsGrid" data-role="grid"
            data-sortable="true"
            data-scrollable="true"
            data-editable="false"
            data-selectable="true"
            data-toolbar="['create', 'save', 'cancel']"
            data-bind="source: systems"
            data-auto-bind="true
            data-columns="[
                 'field': 'SystemName', 'width': 200  ,
                 'field': 'SystemKey', 'width': 200  ,
                 'command': [name: 'destroy', text: 'Delete'], 'width': 38 
            ]">
        </div>
    </div>

当单击给定行时，我想使用 SystemKey 来查找其他数据并将其显示在另一个网格上。如何捕获此点击事件？我添加了这个：

$("#systemsGrid").on("click", gridClick);

但是，即使单击“添加新记录”按钮，它也会触发。仅响应单击网格的一行的正确方法是什么？

【参考方案1】：

为什么不简单地将change 事件绑定到您的gridClick？

类似：

<div>
    <div id="systemsGrid" data-role="grid"
        data-sortable="true"
        data-scrollable="true"
        data-editable="false"
        data-selectable="true"
        data-toolbar="['create', 'save', 'cancel']"
        data-bind="source: systems, events:  change: gridClick "
        data-auto-bind="true"
        data-columns="[
             'field': 'FirstName', 'width': 100  ,
             'field': 'City', 'width': 100  ,
             'command': [name: 'destroy', text: 'Delete'], 'width': 100 
        ]">
    </div>
</div>

我使用 events: change: gridClick 绑定gridClick 的地方

你可以在这里看到它：http://jsfiddle.net/OnaBai/6XALD/2/

【讨论】：

是的，我认为必须有一种“MVVM”方式来做到这一点。谢谢。

查看此链接docs.telerik.com/kendo-ui/getting-started/framework/mvvm/…，可能有用