Kendo 网格搜索工具栏抛出 e.charAt 不是函数

Question

我正在尝试将 Kendo 搜索工具栏添加到我的网格中。

我在 Kendo 网格中添加了以下内容

        toolbar: ["search"],
        search: {
            fields: [
                { name: "BusinessArea", operator: "eq" }
            ]
        },

将其放入我的数据源

            fields: {
                BusinessArea: { type: "string" }
            }

当我运行代码并键入搜索值时，我在控制台中得到以下信息：

2kendo.all.js:2112 Uncaught TypeError: e.charAt is not a function
    at Object.expr (kendo.all.js:2112:46)
    at Function.r.filterExpr (kendo.all.js:5720:25)
    at r.filter (kendo.all.js:5963:35)
    at Function.r.process (kendo.all.js:6160:25)
    at init._queryProcess (kendo.all.js:7753:34)
    at init.query (kendo.all.js:7811:35)
    at init._query (kendo.all.js:7841:29)
    at init.filter (kendo.all.js:7910:22)
    at kendo.all.js:64008:45
expr @ kendo.all.js:2112
r.filterExpr @ kendo.all.js:5720
filter @ kendo.all.js:5963
r.process @ kendo.all.js:6160
_queryProcess @ kendo.all.js:7753
query @ kendo.all.js:7811
_query @ kendo.all.js:7841
filter @ kendo.all.js:7910
(anonymous) @ kendo.all.js:64008
setTimeout (async)
(anonymous) @ kendo.all.js:63981
dispatch @ jquery.js?v=igUc00PXGT1YBL1_Kf7QYy9fPlLqZKcEGrCqDz3EFDI:5183
elemData.handle @ jquery.js?v=igUc00PXGT1YBL1_Kf7QYy9fPlLqZKcEGrCqDz3EFDI:4991

下面是添加了上述语句的完整 JS（删除网格按预期工作，无需搜索）。任何建议都会有所帮助。

谢谢

    $("#notificationGrid").kendoGrid({
        filter: function (e) {
            if (e.field === "BusinessArea" || e.field === "Roles") {
                if (e.filter) {
                    e.filter.filters.forEach(function (f) {
                        f.operator = "contains";
                    });
                }
            }
        },
        filterMenuOpen: function (e) {
            if (e.sender.dataSource.filter()) {
                e.sender.dataSource.filter().filters.forEach(function (f) {
                    //handle nested filters
                    if (f.filters) {
                        f.filters.forEach(function (z) {
                            if (z.field === "BusinessArea" || z.field === "Roles") {
                                checkbox = e.container.find("input[value='" + z.value + "']");
                                if (checkbox[0] && !checkbox[0].checked) {
                                    e.container.find("input[value='" + z.value + "']").click();
                                }
                            }
                        });
                    }
                    if (f.field === "BusinessArea" || f.field === "Roles") {
                        var checkbox = e.container.find("input[value='" + f.value + "']");
                        if (checkbox[0] && !checkbox[0].checked) {
                            e.container.find("input[value='" + f.value + "']").click();
                        }
                    }
                });
            }
        },
        columns: [
            {
                title: "#",
                template: "#= ++record #",
                width: 50
            },
            {
                field: "BusinessArea",
                title: "Business Area",
                filterable: {
                    multi: true
                }
            },
            {
                field: "NoteType.NotificationID",
                title: "Notification ID",
                filterable: {
                    multi: true
                },
                width: 175
            },
            {
                field: "NoteType.NotificationName",
                title: "Notification Name",
                template: '<a href="/notificationdetail/#: BusinessArea #/#: NoteSubscription.NotificationType #">#: NoteType.NotificationName #</a>',
                filterable: {
                    multi: true
                }
            },
            {
                field: "NoteSubscription.NotificationType",
                title: "Notification Type",
                filterable: {
                    multi: true
                }
            },
            {
                field: "DefaultAddress",
                title: "Default From Address",
                filterable: {
                    multi: true
                }
            },
            {
                field: "IsSubscribed",
                title: "Subscribed",
                filterable: {
                    multi: true
                },
                attributes: { "class": "table-cell k-text-center" },
                width: 100
            }
        ],
        toolbar: ["search"],
        search: {
            fields: [
                { name: "BusinessArea", operator: "eq" }
            ]
        },
        editable: "inline",
        filterable: true,
        sortable: true,
        pageable: true,
        dataBinding: function () {
            record = (this.dataSource.page() - 1) * this.dataSource.pageSize();
        }

    });

    var dataSource = new kendo.data.DataSource({
        error: function (e) {
            if (e.status === "error") {
                this.cancelChanges();
                showToast("Error Occurred", e.xhr.responseText, "exclamation-circle", "red");
                var grid = $('#notificationGrid').data('kendoGrid');
                grid.dataSource._data = self.formatData(grid.dataSource.data());
                grid.refresh();
            }
        },
        requestEnd: onRequestEnd,
        transport: {
            read: {
                type: "GET",
                dataType: "json",
                url: '/notification/getall'
            },
            parameterMap: function (data, operation) {
                return kendo.stringify(data);
            }
        },
        schema: {
            model: {
                id: "RecordKey"
            },
            fields: {
                BusinessArea: { type: "string" }
            }
        },
        pageSize: 25
    });

    function onRequestEnd(e) {
        if (e.type === undefined || e.type !== "read") {
            showToast("Success", "Record " + e.sender._destroyed[0].RecordKey + " successfully deleted.", "check", "green");
            e.sender._destroyed = [];
        }
    }

    self.formatData = function (data) {
        return data;
    };

    dataSource.fetch(function () {
        var data = this.data();
        data = self.formatData(data);
        var kendoGrid;
        kendoGrid = $("#notificationGrid").data("kendoGrid");
        kendoGrid.setDataSource(dataSource);
        self.loaded(true);
    });

Answer 1

人们的问题已解决。原来我使用的是 2020.1 版，所以文档不会与实际代码混淆。

我更改了以下内容：

        toolbar: ["search"],
        search: {
            fields: [
                { name: "BusinessArea", operator: "eq" }
            ]
        },

收件人：

        toolbar: ["search"],
        search: {
            fields: ["BusinessArea"]
        },

这默认包含我需要的内容，因此我没有进一步研究如何在我的过时版本中使用运算符函数。可能需要升级到最新版本才能利用该代码。

Kendo 网格搜索工具栏抛出 e.charAt 不是函数

Kendo Grid Search Toolbar throwing e.charAt is not a function

javascript

jquery

kendo-ui

kendo-grid