Javascript TypeError:r.getClientRects不是函数

我正试图按照以下链接在KendoUI网格中创建自定义工具栏：但遇到了一个错误

这就是我试图在代码中执行的操作：

<div id="example">
    <script type="text/x-kendo-template" id="template">
        <div class="toolbar">
            <label class="category-label" for="category">Show products by category:</label>
            <input type="search" id="category" style="width: 150px" />
        </div>
    </script>
    <div id="grid"></div>
    <script>
        $(document).ready(function () {
            var grid = $("#grid").kendoGrid({
                dataSource: {

                    transport: {
                        read: {
                            url: 'http://localhost:52738/Default1/KendoDataAjaxHandle',
                            type: "post",
                            dataType: "json"
                        }
                    },
                    schema: {
                        data: "Data",
                        total: function (response) {
                            return $(response.Data).length;
                        }
                    },
                    pageSize: 10
                },
                toolbar: kendo.template($("#template").html()),
                groupable: true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [
                            {
                                field: "CustomerAltID",
                                filterable: true
                            },
                            {
                                field: "CustomerID",
                                title: "Customer ID"
                            },

                            {
                                field: "CustomerName",
                                title: "Customer Name",

                                template: "<div class='customer-photo'" +
                                                            "style='background-image: url(../Content/Images/customerimg/#:data.CustomerID#.jpg);'></div>" +
                                                        "<div class='customer-name'>#: CustomerName #</div>"
                            },
                            {
                                field: "Gender",
                                title: "Gender",
                                template: "<div class='gender-photo'" +
                                                            "style='background-image: url(../Content/Images/#:data.Gender#.jpg);'></div>" 

                            }
                ]
            });
            var dropDown = grid.find("#category").kendoDropDownList({
                dataTextField: "Gender",
                dataValueField: "CustomerID",
                autoBind: false,
                optionLabel: "All",
                dataSource: {

                    severFiltering: true,
                    transport: {
                        read: {
                            url: 'http://localhost:52738/Default1/KendoDataAjaxHandle',
                            type: "post",
                            dataType: "json"
                        }
                    },
                    schema: {
                        data:"Data"
                    }
                },
                change: function () {
                    var value = this.value();
                    if (value) {
                        grid.data("kendoGrid").dataSource.filter({ field: "CustomerID", operator: "eq", value: parseInt(value) });
                    } else {
                        grid.data("kendoGrid").dataSource.filter({});
                    }
                }
            });
        });
    </script>
</div>

按类别显示产品：
$（文档）.ready（函数（）{
var grid=$（“#grid”）.kendoGrid({
数据源：{
运输：{
阅读：{
网址：'http://localhost:52738/Default1/KendoDataAjaxHandle',
类型：“post”，
数据类型：“json”
}
},
模式：{
数据：“数据”，
总计：功能（响应）{
返回$（response.Data）.length；
}
},
页面大小：10
},
工具栏：kendo.template（$（“#template”）.html（），
分组：对，
可排序：是的，
可分页：{
刷新：是的，
页面大小：对，
按钮数：5
},
栏目：[
{
字段：“CustomerAltID”，
可过滤：真
},
{
字段：“CustomerID”，
标题：“客户ID”
},
{
字段：“客户名称”，
标题：“客户名称”，
模板：“”+
“#：客户名称”
},
{
字段：“性别”，
标题：“性别”，
模板：“”
}
]
});
var dropDown=grid.find（#category”）.kendoDropDownList({
dataTextField:“性别”，
dataValueField:“CustomerID”，
自动绑定：错误，
选项标签：“全部”，
数据源：{
是的，
运输：{
阅读：{
网址：'http://localhost:52738/Default1/KendoDataAjaxHandle',
类型：“post”，
数据类型：“json”
}
},
模式：{
数据：“数据”
}
},
更改：函数（）{
var value=this.value（）；
如果（值）{
grid.data（“kendoGrid”）.dataSource.filter（{field:“CustomerID”，operator:“eq”，value:parseInt（value）}）；
}否则{
grid.data（“kendoGrid”）.dataSource.filter（{}）；
}
}
});
});

我不知道问题是什么，几个小时以来我一直无法找到解决办法

---

我正在使用以下版本-Jqueryv-3.1和Jquery UI-1.12

问题可能是由于使用了Jquery v3.1

Kendo目前还没有正式使用jQueryV3。但如果您还包括jquery迁移，那么它显然可以工作。

这里列出了官方支持的jQuery版本： 注意，它指出剑道R3 2016SP2也应该与jQuery 3.1.1一起使用

因此，您可以：

使用随/提供的jQuery版本 你使用的剑道版本

或者将jQuery3.1与jQueryMigrate一起使用

或者使用剑道R3 2016SP2和jQuery 3.1.1

---

本github中提到的另一种可能性是在html中包含

。这对我很有效。

jquery迁移为我做到了这一点。谢谢这修复了上面的错误，但只给了我一个新的错误

uncaughttypeerror:e.ownerDocument是未定义的

。