Kendo Grid单元格输入内容实时不显示问题求助

问题根源 #

你在Reduction列同时使用了自定义ClientTemplate输入框和Grid的InCell内置编辑模式，两者产生冲突：点击单元格进入编辑状态时，Grid会自动生成内置编辑控件覆盖你自定义的input，用户实际操作的是内置控件，但你绑定的onchange事件只作用在自定义input上，导致输入内容无法实时同步显示；只有当单元格退出编辑状态（切换行），Grid才会把值同步到自定义模板的input，所以出现延迟显示的情况。

方案一：移除自定义模板，使用Grid原生编辑（推荐） #

这种方式符合Kendo Grid的设计规范，兼容性更好，无需维护自定义控件：

1. 修改Grid列配置，去掉自定义ClientTemplate，恢复普通字段绑定：

columns.Bound(nr => nr.Reduction)
      .Width(100)
      .Title("REDUCTION");

2. 替换计算逻辑函数，改用Grid的Save事件处理值变更：

// 监听Grid的Save事件，处理Reduction字段变更后的计算
function onGridSave(e) {
    // 只处理Reduction字段的修改
    if (e.field !== "Reduction") return;

    var dataItem = e.model;
    var reduction = parseFloat(dataItem.Reduction);

    if (isNaN(reduction)) {
        alert("Please enter a valid numeric value for Reduction.");
        e.preventDefault(); // 阻止无效值保存
        return;
    }

    // 计算并更新FinalAssessment
    dataItem.FinalAssessment = dataItem.OriginalAssessment - reduction;
}

3. 绑定Save事件到Grid：

.Events(e => {
    e.Edit("OnEditStart");
    e.Save("onGridSave"); // 新增Save事件绑定
})

方案二：保留自定义模板，禁用该列原生编辑 #

如果需要保留自定义输入控件的灵活性，可禁用该列的内置编辑，手动处理值同步：

1. 修改Grid列配置，设置该列为不可编辑，并完善自定义模板的input（添加初始值绑定和input事件）：

columns.Bound(nr => nr.Reduction)
      .Width(100)
      .Title("REDUCTION")
      .Editable(false) // 禁用该列的原生编辑
      .ClientTemplate("<input class='reduction-input' name='Reduction' value='#= Reduction #' oninput='calculateFinalAssessment(this)' />");

2. 优化计算函数，实时同步值到数据源并仅刷新当前行：

function calculateFinalAssessment(input) {
    var grid = $("#SettlementMemodGrid").data("kendoGrid");
    var row = $(input).closest("tr");
    var dataItem = grid.dataItem(row);
    var originalAssessment = dataItem.OriginalAssessment;

    var reduction = parseFloat(input.value);

    if (isNaN(reduction)) {
        alert("Please enter a valid numeric value for Reduction.");
        input.value = dataItem.Reduction; // 恢复原有有效值
        return;
    }

    // 同步输入值到数据源
    dataItem.set("Reduction", reduction);
    // 计算并更新FinalAssessment
    dataItem.set("FinalAssessment", originalAssessment - reduction);
    
    // 仅刷新当前行，避免全局刷新丢失输入焦点
    grid.refreshRow(row);
}

方案对比 #

• 方案一：遵循Kendo原生逻辑，代码更简洁，维护成本低，适合常规场景。
• 方案二：保留自定义控件的灵活性，需手动处理值同步和刷新，适合特殊UI/交互需求。

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