类型错误:r.getClientRects 不是函数 [英] TypeError : r.getClientRects is not a function
问题描述
我正在尝试通过以下链接在 KendoUI 网格中创建自定义工具栏:http://demos.telerik.com/kendo-ui/grid/toolbar-template 但遇到错误.
这就是我想在我的代码中做的事情:
<script type="text/x-kendo-template" id="template"><div class="工具栏"><label class="category-label" for="category">按类别显示产品:</label><input type="search" id="category" style="width: 150px"/><div id="网格"></div><脚本>$(document).ready(function () {var grid = $("#grid").kendoGrid({数据源: {运输: {读: {url: 'http://localhost:52738/Default1/KendoDataAjaxHandle',类型:帖子"，数据类型:json"}},架构:{数据:数据"，总计:功能(响应){返回 $(response.Data).length;}},页面大小:10},工具栏:kendo.template($("#template").html()),可分组:真实，可排序:真实，可分页:{刷新:真实，页面大小:真实，按钮数:5},列: [{字段:客户AltID"，可过滤:真实},{字段:客户ID"，标题:客户 ID"},{字段:客户名称"，title: "客户姓名",模板:<div class='customer-photo'"+"style='background-image: url(../Content/Images/customerimg/#:data.CustomerID#.jpg);'></div>"+"<div class='customer-name'>#: CustomerName #</div>"},{字段:性别"，title: "性别",模板:<div class='gender-photo'"+"style='background-image: url(../Content/Images/#:data.Gender#.jpg);'></div>"}]});var dropDown = grid.find("#category").kendoDropDownList({数据文本字段:性别"，数据值字段:客户 ID"，自动绑定:假，optionLabel: "全部",数据源: {服务器过滤:真，运输: {读: {url: 'http://localhost:52738/Default1/KendoDataAjaxHandle',类型:帖子"，数据类型:json"}},架构:{数据:数据"}},改变:函数(){var value = this.value();如果(值){grid.data("kendoGrid").dataSource.filter({ field: "CustomerID", operator: "eq", value: parseInt(value) });} 别的 {grid.data("kendoGrid").dataSource.filter({});}}});});
我不知道问题出在哪里，而且我已经好几个小时无法找到解决方案了.
我使用以下版本 - Jquery v-3.1 和 Jquery UI-1.12
问题可能是使用jQuery v3.1
Kendo 目前不适用于 jQuery v3，正式.但如果您还包含 jquery-migrate，它显然可以工作.http://www.telerik.com/forums/jquery-3-0
官方支持的 jQuery 版本如下:http://docs.telerik.com/kendo-ui/intro/installation/prerequisites#supported-jquery-versions请注意，它指出 Kendo R3 2016 SP2 也应该与 jQuery 3.1.1 一起使用.
所以，你可以:
- 使用随附/受任何支持的 jQuery 版本您使用的剑道版本
- 或将 jQuery 3.1 与 jquery-migrate 结合使用
- 或使用 Kendo R3 2016 SP2 和 jQuery 3.1.1
I am trying to create a custom toolbar in KendoUI grid following this link:http://demos.telerik.com/kendo-ui/grid/toolbar-template but getting stuck with an error.
This is what I am trying to do in my code:
<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>
I don't know what the problem is and its been hours that I am unable to figure out the solution for it.
I am using the following versions- Jquery v-3.1 and Jquery UI-1.12
The problem is likely due to using jQuery v3.1
Kendo does not currently work with jQuery v3, officially. But it apparently can work if you also include jquery-migrate. http://www.telerik.com/forums/jquery-3-0
The officially supported versions of jQuery are listed here: http://docs.telerik.com/kendo-ui/intro/installation/prerequisites#supported-jquery-versions Note that it states that Kendo R3 2016 SP2 should also work with jQuery 3.1.1.
So, you can:
- use the version of jQuery that ships with/is supported by whatever version of Kendo you use
- OR use jQuery 3.1 with jquery-migrate
- OR use Kendo R3 2016 SP2 and jQuery 3.1.1
这篇关于类型错误:r.getClientRects 不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
