如何实现Kendo UI Grid按回车键触发添加新行功能

没问题，这需求很好实现，咱们直接通过Kendo Grid的API结合键盘事件监听来搞定，步骤如下：

核心思路 #

我们需要监听回车键的按下事件，当检测到回车键触发且当前没有处于行编辑状态时，调用Kendo Grid内置的addRow()方法——这个方法和点击工具栏的「添加新记录」按钮效果完全一致。

代码实现 #

假设你的Grid已经通过data属性完成初始化，我们在页面就绪后添加事件监听：

$(document).ready(function() {
    // 获取Grid实例
    var grid = $("#tstCnfgnMsrGridDiv").find("[data-role='grid']").data("kendoGrid");
    
    // 监听全局回车键事件（也可以只监听Grid容器内的事件）
    $(document).on("keydown", function(e) {
        // 判断：是回车键 + 当前未处于编辑状态
        if (e.keyCode === 13 && !grid.editable.element) {
            // 触发添加新行
            grid.addRow();
            // 阻止回车键默认行为（避免页面刷新/表单提交等干扰）
            e.preventDefault();
        }
    });
});

关键细节说明 #

• 获取Grid实例：因为你的Grid是用data-role="grid"的方式声明式初始化的，所以通过data("kendoGrid")获取实例是最可靠的方式。
• 编辑状态判断：!grid.editable.element这个条件很重要——它能避免用户在编辑现有行时按回车误触发添加新行（毕竟编辑时按回车通常是提交修改）。
• 替代方案（触发按钮点击）：如果你更倾向于模拟点击工具栏按钮的行为，也可以这么写：

  var createBtn = grid.toolbar.find(".k-grid-add");
  createBtn.click();
  

不过直接调用addRow()是官方推荐的更简洁方式。

适配你的Grid配置 #

你的Grid已经开启了inline编辑和create工具栏按钮，这个代码完全适配你的现有配置，不需要额外修改Grid的初始化参数。

内容的提问来源于stack exchange，提问作者Saritha