[英]Uncaught TypeError: r.getClientRects is not a function jquery.min.js:2
[英]TypeError : r.getClientRects is not a function
我正在尝试按照以下链接在 KendoUI 网格中创建自定义工具栏: http ://demos.telerik.com/kendo-ui/grid/toolbar-template 但遇到错误。
这就是我在代码中尝试做的事情:
<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>
我不知道问题是什么,并且我无法找出解决方案已经有好几个小时了。
我使用以下版本 - Jquery v-3.1和 Jquery UI - 1.12
在这个 github issue 中提到的另一种可能性是在 html 中包含<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
。 这对我有用。
问题可能是由于使用 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.
这样你就可以:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.