Kendo Grid incell编辑模式下如何阻止跳转单元格实现月度总和校验

问题场景 #

启用incell编辑模式的Kendo MVC Grid用于展示用户工时记录，编辑校验规则为：同一用户对应月份列的数值总和不得超过上限，1月、4月、7月、10月上限为150，其余月份上限为100；超出阈值时禁止用户跳转其他单元格，必须修改当前单元格数值使总和符合规则后才可退出编辑。目前调用grid.editCell()时提示函数无效。

报错根因 #

1. 选择器大小写错误：Grid实例绑定的DOM ID是#Grid（大写G），但原代码定位单元格时使用的选择器是#grid（小写g），获取到无效DOM对象，传入editCell后执行失败
2. 执行时序冲突：cellClose事件触发时，Grid上一轮编辑状态还未完全释放，同步调用editCell会被状态锁拦截
3. 依赖全局变量CurrentEditCell容易出现赋值不及时问题，稳定性差

修复后完整代码 #

$(document).ready(function () {
    var grid = $("#Grid").data("kendoGrid");
    grid.bind("cellClose", grid_cellClose);
    function grid_cellClose(e) {
        var dataSource = grid.dataSource;
        // 直接从事件参数获取当前编辑列字段，无需依赖全局变量
        var columnName = e.sender.columns[e.container[0].cellIndex].field;
        // 筛选当前用户所有记录
        var userRecords = dataSource.data().filter(item => item.EmpNumber === e.model.EmpNumber);
        // 计算月度总和，兼容非数值场景
        var sumOfMonth = userRecords.reduce((sum, record) => sum + (parseInt(record[columnName]) || 0), 0);
        // 统一判断阈值
        var threshold = ["Jan_F", "Apr_F", "Jul_F", "Oct_F"].includes(columnName) ? 150 : 100;
        
        if (sumOfMonth > threshold) {
            e.preventDefault();
            var focusedCell = e.container; // 直接复用事件返回的当前单元格对象，无需二次查找
            grid.select(focusedCell);
            // 加10ms延迟避开状态锁，确保editCell正常触发
            setTimeout(() => {
                grid.editCell(focusedCell);
                alert(`该用户本月工时总和已超出上限${threshold}，请调整后再操作`);
            }, 10);
        }
    }
});

优化说明 #

• 去掉冗余的临时DataSource创建逻辑，直接用数组方法筛选计算，性能更高
• 优化阈值判断逻辑，减少重复代码
• 增加非数值兼容处理，避免NaN导致的计算错误

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