如何过滤Kendo Grid数据？Name字段过滤配置问题排查

嘿，我来帮你捋捋这个问题～你现在用ASP.NET MVC的Kendo Grid，通过服务器绑定加载Model里的列表数据，想过滤出Name为空或null的记录，但自己写的前端代码没生效，问题主要出在这几个地方：

你的代码问题点 #

1. 数据源未关联到已有Grid
   你当前的Grid是服务器绑定模式（直接把Model.list传给Grid构造函数），这种模式下Grid的数据已经直接渲染到页面了。而你新建的kendo.data.DataSource是一个完全独立的对象，并没有和页面上的listgrid Grid关联起来，所以你的过滤逻辑根本没作用到Grid上。

2. 字段名大小写潜在问题
   你Grid里绑定的是后端的Name属性（首字母大写），但你前端测试数据里写的是name: "sasdas"（小写），虽然测试数据只是示例，但实际使用时要确保前端过滤的field值和后端属性名完全一致（Kendo对大小写敏感）。

两种可行的解决方案 #

方案一：客户端过滤（适合小数据量） #

如果你想在客户端完成过滤，需要把Grid改成客户端绑定模式，然后给已有的Grid数据源应用过滤规则：

第一步：修改后端Grid代码

把Grid改成客户端绑定，禁用服务器操作（让过滤在本地执行）：

@(Html.Kendo().Grid<YourEntityType>() // 替换成你的实体类类型
    .Name("listgrid")
    .Columns(columns => {
        columns.Bound(p => p.Name).Title("Name");
        columns.Bound(p => p.status).Title("status");
    })
    .Sortable()
    .Resizable(resize => resize.Columns(true))
    .DataSource(dataSource => dataSource
        .Ajax() // 启用Ajax绑定
        .ServerOperation(false) // 禁用服务器端操作，所有逻辑在客户端执行
        .Read(read => read.Action("GetYourData", "YourController")) // 指向返回数据的Action
    )
)

如果不想用Ajax，也可以直接把Model数据传给客户端数据源：

// 替代上面的DataSource配置
.DataSource(dataSource => dataSource
    .Client()
    .ServerOperation(false)
    .Data(Model.list) // 直接传入Model的列表数据
)

第二步：前端应用过滤

在页面加载完成后，获取Grid的数据源并添加过滤规则：

$(document).ready(function() {
    // 获取Grid实例
    const grid = $("#listgrid").data("kendoGrid");
    // 获取Grid的数据源
    const dataSource = grid.dataSource;

    // 应用过滤：匹配Name为null或空字符串的记录
    dataSource.filter({
        logic: "or",
        filters: [
            { field: "Name", operator: "eq", value: null },
            { field: "Name", operator: "eq", value: "" }
        ]
    });
});

方案二：服务器端过滤（适合大数据量） #

如果数据量比较大，更推荐在后端直接过滤好数据再传给Grid，这样能减少前端的数据传输量：

在你的Controller Action里处理过滤：

public ActionResult YourViewAction() {
    // 获取原始数据
    var originalList = YourDataService.GetAllItems();
    // 过滤Name为空或null的记录
    var filteredList = originalList.Where(item => string.IsNullOrEmpty(item.Name)).ToList();
    // 组装ViewModel传给视图
    var viewModel = new YourViewModel { list = filteredList };
    return View(viewModel);
}

这样你的Grid直接渲染已经过滤好的数据，不需要前端做额外操作。

额外注意事项 #

• 确保后端属性名和前端过滤的field值大小写完全一致，比如后端是Name，前端就必须写"Name"。
• 如果用Ajax绑定且需要服务器端过滤（比如大数据量），可以开启ServerOperation(true)，然后在Controller的Action里接收Kendo的过滤参数并处理。

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