Kendo Grid外键列过滤器未生效，如何基于网格内容过滤？

我帮你排查了下代码里的问题，你的自定义过滤器没触发主要是语法错误和字段名不匹配导致的，另外还可以优化函数让过滤器显示更友好的内容。下面是具体的修复步骤和代码：

一、先修正Grid列配置里的语法错误 #

你的第二个列的Filterable配置中，{field: NameId}里的NameId没有加引号，这会导致JavaScript语法错误，直接让自定义函数无法执行；另外第一个列的field设置成了'Id'，但你的列绑定的是HouseId，字段名不匹配，即使函数执行了也拿不到正确的数据。

修正后的Grid列配置代码：

@(Html.Kendo().Grid<Kendo_UI_Bootstrap_Integration.Models.DTO.GridDto>()
    .Name("GridName")
    .Filterable(f => f.Mode(GridFilterMode.Menu).Extra(false))
    .EnableCustomBinding(true)
    .Columns(columns => {
        columns.ForeignKey(c => c.HouseId, Model.Homes, "HouseGuid", "HouseName")
            .EditorTemplateName("HouseDropDown")
            .Title("House Name")
            .Filterable(f => f.UI("$.proxy(GridFilter, {field: 'HouseId'})")
                .Operators(o => o.ForString(e => e.Clear().IsEqualTo("Is equal to").IsNotEqualTo("Is not equal to"))));

        columns.ForeignKey(c => c.NameId, Model.Names, "NameGuid", "Name")
            .EditorTemplateName("NameDropDown")
            .Title("Name")
            .Filterable(f => f.UI("$.proxy(GridFilter, {field: 'NameId'})")
                .Operators(o => o.ForString(e => e.Clear().IsEqualTo("Is equal to").IsNotEqualTo("Is not equal to"))));
    })
)

二、优化自定义过滤器函数 #

原来的函数只收集了ID值，过滤器里会显示Guid字符串，体验不好。我调整了函数，让它同时收集ID和对应的显示名称，去重后按名称排序，这样过滤器里显示的是友好的名称，实际传的是ID值：

function GridFilter(element) {
    var grid = $("#GridName").data("kendoGrid");
    var fieldName = this.field;
    // 根据ID字段匹配对应的显示字段
    var displayField = fieldName === 'HouseId' ? 'HouseName' : 'Name';
    
    // 用Set做去重，效率更高
    var uniqueIds = new Set();
    // 筛选出唯一的条目，同时整理成DropDown需要的结构
    var filterItems = grid.dataSource.data().filter(item => {
        var itemId = item[fieldName];
        if (itemId !== null && !uniqueIds.has(itemId)) {
            uniqueIds.add(itemId);
            return true;
        }
        return false;
    }).map(item => ({
        value: item[fieldName],
        text: item[displayField]
    }));
    
    // 按显示名称排序
    filterItems.sort((a, b) => a.text.localeCompare(b.text));
    
    // 初始化DropDownList
    $(element).kendoDropDownList({
        dataSource: filterItems,
        dataValueField: "value",
        dataTextField: "text",
        optionLabel: "--请选择--" // 可选，添加默认提示
    });
}

三、关键说明 #

• 如果你的网格开启了分页，dataSource.data()会获取所有已加载到本地的网格数据；如果只想基于当前页的内容过滤，可以把dataSource.data()改成dataSource.view()。
• 修正语法错误后，自定义过滤器就能正常触发，替代原来使用ViewModel中数据库数据的默认过滤器，实现仅基于网格现有内容过滤的需求。

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