如何处理 Kendo UI Grid 行双击事件

Posted 2023-05-07

【中文标题】如何处理 Kendo UI Grid 行双击事件

【英文标题】：How to handle a Kendo UI Grid row double-click event

【发布时间】：2014-01-17 11:41:44

【问题描述】：

我的 MVC 应用程序中有一个可选择的 KendoUI 网格。当用户双击网格时，我想做一些事情。

我没有看到网格的双击事件。

没有暴露的双击事件如何处理？

【参考方案1】：

使用标准的双击事件。第一次点击会选中网格行，为其添加.k-state-selected类，第二次点击会触发双击事件。

$("#yourgridname").on("dblclick", "tr.k-state-selected", function () 
    // insert code here
);

【讨论】：

我确信这就是我用谷歌搜索的方式，但它对我不起作用。我不知道我做错了什么。

这很奇怪，我在特定项目上使用完全相同的方法，它对我有用。当用户双击网格时，你想做什么？

我要获取他双击的行的数据。这是一个可选择的网格。我现在已经删除了双击事件处理程序并在那里放置了一个选择按钮。请回答这个问题帮助我：***.com/questions/20858763/…

【参考方案2】：

你也可以使用dataBound

dataBound: function (e) 
   var grid = this;
   grid.tbody.find("tr").dblclick(function (e) 
      var dataItem = grid.dataItem(this);
      ...
    );

来自http://www.telerik.com/forums/double-click-on-grid-row-with-angular

【讨论】：

这是迄今为止我在网上找到的最简单、最干净的解决方案。也许添加 dataBound 是一个 Kendo UI 网格配置。

为了让它工作，我需要将第二行更改为const grid = e.sender;。

这种方法为每个 tr 元素添加一个事件处理程序。所以如果你有一千行，你最终会得到一千个事件处理程序。最好使用委托事件处理程序而不是直接绑定的事件处理程序。

【参考方案3】：

使用kendoHelpers 可以获得该行的dataItem。 https://github.com/salarcode/kendoHelpers

kendoHelpers.grid.eventRowDoubleClick (theGrid, 
    function(dataItem)
        // do stuff with dataItem
    );

它还有eventCellDoubleClick，它适用于单元格。

【参考方案4】：

这是另一种处理方式：

var grid = $('#myGrid').kendoGrid(
    columnMenu: true,
    filterable: true,
    selectable: true,
    // and many more configuration stuff...
).data('kendoGrid');

grid.tbody.delegate('tr', 'dblclick', function() 
    var dataItem = grid.dataItem($(this));
    // do whatever you like with the row data...
);

自 v3.0 起，delegate 已被弃用。你可以使用on，像这样：

grid.tbody.on('dblclick', 'tr', function() 
    var dataItem = grid.dataItem($(this));
    // do whatever you like with the row data...
);

【讨论】：

这种方法对我来说效果更好 - dblclick(function (e) ...); 事件处理程序在编辑一行后失败（内联）。