Kendo Grid MVC中dataItem.set修改值后页面未更新显示问题

AI 小北

2026-10-4

问题原因与修复方案

incell编辑模式下Kendo Grid会锁定正在编辑的行的UI渲染，加上Total列设置为不可编辑，调用dataItem.set()后未主动触发行重绘是视图不更新的核心原因，同时现有数值计算逻辑存在类型异常风险。

修复步骤

第一步：修正数值计算逻辑，强制把A、B列的值转为数字，避免字符串拼接得到错误结果
第二步：更新Total值前先关闭当前编辑状态，解除UI渲染锁
第三步：更新值后主动刷新对应行，触发不可编辑列的UI更新
冗余的副本数据源过滤逻辑可以直接删除，无实际作用

修改后代码

function onChange(e) {
    if (e.action == "itemchange" && e.field != "HoursYTD") {
        var editItemModelId = e.items[0].EmpNumber;
        var grid = $("#Grid").data("kendoGrid");
        var dataItem = grid.dataSource.get(editItemModelId);
        CurrentEditCell = e.field;

        // 强制转数值，空值或非数值默认取0，避免计算异常
        var valA = Number(e.items[0].A) || 0;
        var valB = Number(e.items[0].B) || 0;
        var HoursYTD = valA + valB;

        // 先关闭当前编辑状态，解除UI渲染锁
        grid.closeCell();
        
        // 更新数据源字段值
        dataItem.set("Total", HoursYTD);
        
        // 主动刷新当前行，触发Total列UI更新
        var targetRow = grid.tbody.find("tr[data-uid='" + dataItem.uid + "']");
        grid.refreshRow(targetRow);
    }
}