Kendo Grid技术实现：如何根据其他单元格值计算目标单元格值？

问题描述 #

我有一个从MVC控制器获取数据的Kendo Grid，表格显示正常，其中Reduction列可编辑。需求为：用户在Reduction列单元格输入值并切换离开后，自动计算Final Assessment值（公式为OriginalAssessment - Reduction）。

当前Kendo Grid代码如下：

@(Html.Kendo().Grid<TaxCertApp.ViewModels.SettlementMemoViewModel>()
   .Name("SettlementMemodGrid")
   .Columns(columns =>
   {
       columns.Bound(nr => nr.TaxYear).Width(50).Title("Tax Year");
       columns.Bound(nr => nr.OriginalAssessment).Width(100).Title("ORIG. ASSESSMENT").Format("{0:##########0}");
       columns.Bound(nr => nr.Reduction).Width(100).Title("REDUCTION").EditorTemplateName("Integer");
       columns.Bound(nr => nr.FinalAssessment).Width(100).Title("FINAL ASSESSMENT").Format("{0:###,###,##0}");
       columns.Bound(nr => nr.Rate).Width(100).Title("RATE").EditorTemplateName("Currency");
       columns.Bound(nr=> nr.RefundSavings).Width(100).Title("REFUND/SAVINGS").Format("{0:###,###,##0}");
       columns.Bound(e => e.Type).Width(100).EditorTemplateName("TypeList").Title("TYPE (R S R/S)");
   })
   .Editable(editable => editable.Mode(GridEditMode.InCell))
   .Pageable()
   .Scrollable()
   .Events(e => e.Edit("OnEdit"))
   .Events(ev => ev.Change("OnChange"))
   .DataSource(dataSource => dataSource
   .Ajax()
   .Batch(true)
   .ServerOperation(false)
   .Model(model =>
   {
       model.Id(n => n.TaxYear);
       model.Field(n => n.OriginalAssessment).Editable(false);
       model.Field(n => n.Reduction).Editable(true);
       model.Field(n => n.FinalAssessment).Editable(false);
       model.Field(n => n.Rate).Editable(true);
       model.Field(n => n.RefundSavings).Editable(true);
       model.Field(n => n.Type).Editable(true);
   })
   .PageSize(20)
   .Read(read => { read.Action("SettlementMemoFetchGrid", "Forms").Data("BuildObjectGridSettMemo"); })
   )

目前点击Reduction列单元格时，OnEdit函数在编辑前触发，而OnChange函数从未执行，请问如何实现需求功能？

解决方案 #

InCell编辑模式下，Grid的Change事件不会响应单元格编辑完成的动作，你需要改用Save事件（单元格编辑完成并失去焦点时触发），或直接给编辑器绑定blur事件处理计算逻辑，以下是两种可行方案：

方案1：使用Grid的Save事件 #

1. 修改Grid的Events配置，替换原Change事件为Save：

.Events(e => {
    e.Edit("OnEdit");
    e.Save("OnSave"); // 替换原Change事件
})

2. 编写OnSave函数，在单元格保存时计算FinalAssessment：

function OnSave(e) {
    // 仅处理Reduction列的编辑保存
    if (e.field === "Reduction") {
        var dataItem = e.model;
        // 处理空值或非数值情况，默认取0
        var reduction = parseFloat(dataItem.Reduction) || 0;
        // 更新FinalAssessment值，Grid会自动刷新对应单元格
        dataItem.FinalAssessment = dataItem.OriginalAssessment - reduction;
    }
}

方案2：在编辑器Blur事件中处理 #

若需要更即时的计算响应，可在OnEdit事件中给Reduction的编辑器绑定blur事件：

function OnEdit(e) {
    // 仅针对Reduction列的编辑器
    if (e.field === "Reduction") {
        var input = e.container.find("input");
        input.on("blur", function() {
            var dataItem = e.model;
            var reduction = parseFloat($(this).val()) || 0;
            // 使用set方法更新模型，确保Grid感知到数据变化并刷新
            dataItem.set("FinalAssessment", dataItem.OriginalAssessment - reduction);
        });
    }
}

注意事项 #

• 确保OriginalAssessment和Reduction为数值类型，避免计算出现NaN
• 若需要后端验证计算逻辑，建议在ViewModel或后端接口中同步处理该计算，防止前端数据篡改

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