Kendo Grid启用Filterable(true)的列筛选数据无法跨页面持久化问题排查与解决请求

这个问题的核心在于Kendo Grid内置的列筛选状态管理和你的自定义筛选菜单逻辑产生了冲突：

• 当你为某列设置.Filterable(true)时，Kendo Grid会自动为该列维护一套内置的筛选状态跟踪机制，在分页等操作时，它会尝试基于自身记录的列筛选状态来构建请求参数。
• 但你的自定义筛选菜单是直接通过e.sender.dataSource.filter(andfilter)手动设置数据源的筛选条件，并没有同步更新Kendo Grid内置的列筛选状态。当分页触发时，Kendo会忽略你手动设置的数据源filter，转而使用它自身记录的该列筛选状态（此时这个状态是空的），导致该列的筛选条件丢失。
• 你虽然把筛选条件存在了localStorage，但并没有在分页等操作时自动从localStorage恢复并应用到数据源，这也加剧了状态丢失的问题。

针对这个问题，我们可以通过以下几个步骤来修复：

1. 禁用Kendo内置的列筛选状态跟踪，完全由自定义逻辑控制 #

修改列的Filterable配置，使用自定义UI的方式，让Kendo不再为该列维护内置筛选状态：

columns.Bound(m => m.Column2).Title("Column2").Width(90)
    .Filterable(f => f.UI("customFilterMenuTrigger")); // 替换原来的.Filterable(true)

然后添加一个空的JS函数作为占位（因为我们已经通过FilterMenuInit事件完全自定义了菜单，这个函数只是用来禁用Kendo的默认筛选UI）：

function customFilterMenuTrigger() {
    // 空函数，用于禁用Kendo默认的列筛选UI
}

2. 自动恢复筛选状态，确保分页时筛选条件不丢失 #

在Grid的DataBound事件中，从localStorage读取之前保存的筛选条件并应用到数据源，确保每次页面加载、分页时筛选状态都能恢复：

首先修改Grid的Events配置，添加DataBound事件：

.Events(e => e
    .FilterMenuInit("OnFilterMenuInit")
    .DataBound("OnGridDataBound") // 新增这个事件
)

然后添加对应的JS函数：

function OnGridDataBound(e) {
    var storedFilter = localStorage["kendo-grid-filter"];
    if (storedFilter) {
        var filter = JSON.parse(storedFilter);
        // 只有当当前数据源没有筛选条件时才恢复，避免重复应用
        if (!e.sender.dataSource.filter()) {
            e.sender.dataSource.filter({ logic: "and", filters: filter });
        }
    }
}

3. 优化筛选条件的构建逻辑（可选但建议） #

你的自定义筛选逻辑中，andfilter.filters.push(orfilter)的结构可能会导致筛选逻辑不符合预期，建议调整为更清晰的结构：

// 修改筛选条件构建部分
var allFilters = [];

// 收集所有筛选条件
if (col1 != "") {
    allFilters.push({ field: "Column1", operator: col1Ops, value: col1 });
}
if (col2 != "") {
    allFilters.push({ field: "Column2", operator: col2Ops, value: col2 });
}
if (col3 != "") {
    allFilters.push({ field: "Column3", operator: col3Ops, value: col3 });
}

// 根据需求组合逻辑（这里示例为AND组合，可按需调整）
var finalFilter = { logic: "and", filters: allFilters };

// 应用筛选并保存状态
e.sender.dataSource.filter(finalFilter);
localStorage["kendo-grid-filter"] = kendo.stringify(finalFilter.filters);

4. 确保分页时请求携带正确的筛选条件 #

由于你已经设置了.ServerOperation(true)，只要数据源的filter状态正确，Kendo会自动把筛选条件打包到DataSourceRequest中，无需额外修改Controller方法。

1. 点击列的筛选图标，打开自定义筛选菜单，设置筛选条件并点击Filter按钮。
2. 筛选条件会被保存到localStorage，同时数据源应用筛选，Grid显示正确结果。
3. 切换分页时，DataBound事件会从localStorage读取筛选条件并重新应用到数据源，确保请求携带所有筛选条件，包括之前丢失的列。

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