Kendo UI Grid：如何在Error事件中取消变更并保持编辑弹窗打开

我来帮你解决这个Kendo UI Grid的问题！你遇到的情况是因为grid.cancelChanges()和阻止弹窗关闭的逻辑互相冲突了——前者会触发dataBinding事件，而你绑定的dataBinding拦截代码会阻止cancelChanges()的执行；反过来先执行cancelChanges()的话，弹窗又会直接关闭，所以两个需求只能二选一。

下面给你两种可行的解决方案：

方案一：通过拦截dataBinding事件同时完成两个操作 #

这种方式会在dataBinding的一次性回调里先取消变更，再阻止弹窗关闭，还加了个标志避免循环触发：

function returnError(e) {
    var grid = $("#mmdKendoGrid").data("kendoGrid");
    var isHandlingCancel = false;

    // 绑定一次性的dataBinding事件处理函数
    grid.one("dataBinding", function (dataBindingEvent) {
        if (!isHandlingCancel) {
            isHandlingCancel = true;
            // 先取消所有待处理变更：恢复编辑内容、还原删除的行
            grid.cancelChanges();
            // 阻止默认的dataBinding行为，避免编辑弹窗关闭
            dataBindingEvent.preventDefault();
        }
    });

    // 手动触发dataBinding事件，让上面的回调执行
    grid.trigger("dataBinding");
}

方案二：阻止默认错误处理后手动控制状态 #

这种方式更直观，先阻止Grid自带的错误处理逻辑，再取消变更，最后重新打开弹窗保持编辑状态：

function returnError(e) {
    var grid = $("#mmdKendoGrid").data("kendoGrid");
    
    // 阻止Grid的默认错误处理逻辑，防止弹窗自动关闭
    e.preventDefault();
    
    // 取消所有待处理变更：恢复编辑内容、还原删除的行
    grid.cancelChanges();
    
    // 如果当前有编辑弹窗打开，重新打开它以保持编辑状态
    var editableRow = grid.editable?.element?.closest("tr");
    if (editableRow) {
        grid.editRow(editableRow);
    }
}

简单解释 #

• 方案一通过一次性拦截dataBinding事件，把两个操作放在同一个回调里执行，用isHandlingCancel避免循环触发，确保变更取消和弹窗阻止都能生效。
• 方案二先禁用Grid的默认错误行为，再执行变更取消（这时候弹窗会被关闭），最后重新打开弹窗，让用户看到恢复后的内容，同时保持编辑模式。

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