解决Kendo Grid搜索时PrimaryContact为null引发的类型错误

针对你遇到的PrimaryContact为null时搜索抛出Uncaught TypeError: Cannot read properties of null (reading 'FirstName')的问题，以下是几个可行的解决办法：

方案1：通过DataSource Schema Model定义处理嵌套属性 #

在DataSource的Schema中显式定义模型结构，为PrimaryContact设置默认值，确保它永远不是null。这样搜索时访问其属性就不会报错：

.DataSource(dataSource => dataSource
    .Custom()
    .PageSize(20)
    .Schema(schema => schema
        .Data(x => "function(d) { return validateData(d); }")
        .Model(model => {
            model.Field(p => p.Name);
            model.Field(p => p.PrimaryContact).DefaultValue(new { FirstName = "", PhoneNumber = "", EmailAddress = "" });
            // 其他字段定义...
        })
    )
)

同时调整你的validateData函数，确保数据中的null被替换为默认对象：

function validateData(data) {
    for (const item of data) {
        // 如果PrimaryContact是null或不存在，替换为默认空对象
        item.PrimaryContact = item.PrimaryContact || { FirstName: "", PhoneNumber: "", EmailAddress: "" };
    }
    return data;
}

方案2：自定义搜索过滤逻辑 #

覆盖Grid的默认搜索行为，手动处理PrimaryContact为null的情况。通过Filter事件拦截搜索请求，修改过滤条件：

首先在Grid的Events中添加Filter事件：

.Events(events => events.DataBound("onDataBound").Filter("onFilter"))

然后实现onFilter函数：

function onFilter(e) {
    const newFilters = [];
    e.filter.filters.forEach(filter => {
        if (filter.field.startsWith("PrimaryContact.")) {
            // 组合条件：PrimaryContact不为null 且 对应属性匹配搜索值
            newFilters.push({
                logic: "and",
                filters: [
                    { field: "PrimaryContact", operator: "neq", value: null },
                    filter
                ]
            });
        } else {
            newFilters.push(filter);
        }
    });
    e.filter.filters = newFilters;
}

方案3：后端预处理数据 #

从根源解决问题，在后端返回Grid数据时，确保PrimaryContact字段永远不会为null，而是返回一个空的Contact对象。比如在数据查询或API返回时初始化默认值：

// 示例：EF Core中处理
var data = dbContext.Advertisers
    .Select(a => new AdvertiserViewModel {
        AdvertiserId = a.AdvertiserId,
        Name = a.Name,
        PrimaryContact = a.PrimaryContact ?? new ContactViewModel {
            FirstName = "",
            PhoneNumber = "",
            EmailAddress = ""
        },
        IsActive = a.IsActive
    })
    .ToList();

这样前端接收的数据中PrimaryContact永远是一个对象，不会出现null，搜索和显示都不会报错。

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