KendoUI Grid数据更新后状态列未重新渲染问题求助

我有一个带有「Status」列的KendoUI Grid：

问题 #

修改单元格值后触发保存并更新网格数据，行数据已更新但状态列未重新渲染。

问题详情 #

• 第一行为筛选行，其余为数据行
• 已应用筛选条件：Status = Paid
• 将第3行的状态修改为"Not Paid"
• 触发保存至后端数据库后，重新获取所有Status = Paid的数据并赋值给KendoUI Grid

预期结果 #

1. 表格行数减少一行（因第3行状态变更）
2. 表格中所有行的Status均为"Paid"

实际结果 #

1. 表格行数减少一行 => 符合预期
2. 原第4行变为第3行 => 符合预期
3. 第3行（原第4行）的状态仍显示"Not Paid"，但实际获取的数据中其Status为"Paid" => 异常

补充说明 #

• 单元格值编辑时，变更会保存在客户端字典中，点击保存按钮时才将所有变更提交至后端

网格数据绑定代码 #

<kendo-grid 
[data]="this.dataAggregative.data"
...>
...
</kendo-grid>

列模板代码 #

<kendo-grid-column
    [editable]="true"
    field="status"
    title="Status"
>

    <ng-template kendoGridFilterCellTemplate let-filter>
        <drop-down-list-filter
            class="k-filtercell-wrapper"
            [filter]="filter"
            [data]="statusFilterEntries"
            textField="text"
            valueField="status"
        >
        </drop-down-list-filter>
    </ng-template>

    <ng-template kendoGridCellTemplate let-dataItem>
        <div class="toolbar-container container">
            <kendo-dropdownlist
                [data]="statusFilterEntries"
                textField="text"
                valueField="status"
                (selectionChange)="statusSelectionChange($event, dataItem.id)"
                [value]="statusFilterEntries[dataItem.status == statusEnum.NotPaid ? 0 : 1]"
            >
            </kendo-dropdownlist>
        </div>
    </ng-template>

</kendo-grid-column>

解决方案 #

1. 修正下拉框value绑定逻辑 #

当前下拉框通过数组索引取值的绑定方式，容易因数据更新导致匹配失效，且Angular变更检测可能无法识别变化。改为直接绑定数据项的status字段，并开启valuePrimitive确保值类型匹配：

<kendo-dropdownlist
    [data]="statusFilterEntries"
    textField="text"
    valueField="status"
    (selectionChange)="statusSelectionChange($event, dataItem.id)"
    [value]="dataItem.status"
    [valuePrimitive]="true"
>
</kendo-dropdownlist>

2. 确保网格数据为全新引用 #

Angular变更检测依赖引用变化，若仅修改原数组内容而非替换数组，Kendo Grid可能不触发重新渲染。更新数据时需生成新数组：

// 数据更新后赋值新数组
this.dataAggregative.data = await fetchPaidStatusData();
// 或手动创建新数组触发检测
this.dataAggregative.data = [...this.dataAggregative.data];

3. 手动触发网格刷新 #

若上述方法无效，可通过Grid实例强制刷新：
首先给Grid添加模板引用：

<kendo-grid 
    #gridRef
    [data]="this.dataAggregative.data"
    ...>
...
</kendo-grid>

然后在组件中调用刷新方法：

import { Component, ViewChild } from '@angular/core';
import { GridComponent } from '@progress/kendo-angular-grid';

@Component({...})
export class YourComponent {
    @ViewChild('gridRef') grid!: GridComponent;

    afterSaveAndFetchData() {
        this.grid.refresh();
    }
}

4. 清理客户端字典缓存 #

保存成功后需清空客户端缓存的编辑值，避免下拉框读取旧数据：

afterSaveSuccess() {
    // 清空所有缓存的编辑状态
    Object.keys(this.clientCache).forEach(key => delete this.clientCache[key]);
}

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