Kendo Grid分页内联编辑后二次排序获取旧数据异常的原因及解决方案

问题原因 #

1. 数据源与视图不同步：行内编辑时如果直接修改DOM元素或手动修改数据对象，没有通过Kendo Grid官方的dataSource/Model API更新数据，会导致Grid内部缓存的数据源和实际修改后的数据不一致。排序时Grid基于旧的缓存数据计算索引，就会出现索引显示正确但对应数据对象不符的情况。
2. 分页状态未刷新：启用分页后，Grid会缓存当前页的数据。编辑行后如果没有触发数据源的分页刷新，排序时Grid会基于旧的分页缓存重新排序，而非最新的全量数据（或当前页最新数据）。
3. 服务器端模式下数据同步问题：如果使用服务器端分页/排序，编辑操作后后端数据未正确更新，或排序请求时后端返回的分页数据未包含最新修改内容，也会导致前端数据异常。

解决方案 #

1. 编辑操作必须通过官方API更新数据 #

行内编辑完成时，通过Model.set()方法修改数据，确保数据源同步更新：

// 绑定Grid的save事件
$("#grid").kendoGrid({
    // ... 其他配置
    editable: "inline",
    save: function(e) {
        // 直接通过Model API更新字段，而非手动修改DOM
        e.model.set(e.values);
        // 若为远程数据源，调用sync同步到后端
        e.sender.dataSource.sync();
    }
});

2. 排序前强制刷新数据源/视图 #

在排序事件触发时，先刷新数据源或Grid视图，确保使用最新数据进行排序：

$("#grid").kendoGrid({
    // ... 其他配置
    sort: function(e) {
        var grid = this;
        // 刷新数据源，拉取最新数据（远程模式）或同步本地缓存（本地模式）
        grid.dataSource.read();
        // 刷新Grid视图，确保DOM与数据源一致
        grid.refresh();
    }
});

3. 服务器端模式下校验后端逻辑 #

如果采用服务器端分页/排序：

• 确保编辑接口正确更新数据库数据
• 排序接口接收请求时，基于最新的数据库数据进行排序和分页，返回正确的结果集

4. 避免直接操作DOM修改数据 #

任何数据变更都要通过Kendo的dataSource或Model API完成，禁止手动修改Grid的DOM元素内容，否则会破坏Grid内部的状态同步机制。

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