I'm experiencing an issue when a page references both Kendo UI and Telerik Reporting HTML5 libraries. If on a page I need to call kendo UI grid control I get an error message:
TypeError: n._pageableQueryOptions is not a function
at HTMLSelectElement.pageSize (kendo.all.min.js:28)
at HTMLSelectElement.<anonymous> (jquery.min.js?v=FgpCb_KJQlLNfOu91ta32o_NMZxltwRo8QtmkMRdAu8:2)
at Function.each (jquery.min.js?v=FgpCb_KJQlLNfOu91ta32o_NMZxltwRo8QtmkMRdAu8:2)
at E.fn.init.each (jquery.min.js?v=FgpCb_KJQlLNfOu91ta32o_NMZxltwRo8QtmkMRdAu8:2)
at E.fn.init.val (jquery.min.js?v=FgpCb_KJQlLNfOu91ta32o_NMZxltwRo8QtmkMRdAu8:2)
at new init (kendo.all.min.js:40)
at init._pageable (kendo.all.min.js:60)
at new init (kendo.all.min.js:57)
at HTMLDivElement.<anonymous> (kendo.all.min.js:26)
at Function.each (jquery.min.js?v=FgpCb_KJQlLNfOu91ta32o_NMZxltwRo8QtmkMRdAu8:2)
It looks like there is a conflict between the libraries.This is how page looks like:
<!DOCTYPE html>
<html>
<head>
<title>Report Viewer Demo</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="/lib/telerik.kendo-ui/css/kendo.common.min.css" />
<link rel="stylesheet" href="/lib/telerik.kendo-ui/css/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="/lib/telerik.kendo-ui/css/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="/lib/telerik.kendo-ui/css/kendo.bootstrap.mobile.min.css" />
<script src="/lib/jquery/jquery.min.js" asp-append-version="true"></script>
<script src="/lib/telerik.kendo-ui/js/kendo.all.min.js"></script>
<script src="/lib/telerik.reporting/telerikReportViewer-14.0.20.115.min.js"></script>
<script src="/lib/telerik.reporting/telerikReportViewer.kendo-14.0.20.115.min.js"></script>
<style>
#reportViewer1 {
position: absolute;
left: 5px;
right: 5px;
top: 50px;
bottom: 5px;
overflow: hidden;
font-family: Verdana, Arial;
}
</style>
</head>
<body>
<div class="row">
<a href="/">Go Home</a>
</div>
<div id="reportViewer1">
loading...
</div>
<div id="ddd"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#ddd").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
$("#reportViewer1")
.telerik_ReportViewer({
serviceUrl: 'https://localhost:44388/api/reports/',
//ReportSource - report description
reportSource: {
// The report can be set to a report file name
// or CLR type name (report class definition).
report: "Barcodes Report.trdp",
// Parameters name value dictionary
parameters: {
CompanyId: 1,
PatientId: 1
}
},
viewMode: telerikReportViewer.ViewModes.INTERACTIVE,
scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,
scale: 1.0
});
});
</script>
</body>
</html>
TypeError: n._pageableQueryOptions is not a function
at HTMLSelectElement.pageSize (kendo.all.min.js:28)
at HTMLSelectElement.<anonymous> (jquery.min.js?v=FgpCb_KJQlLNfOu91ta32o_NMZxltwRo8QtmkMRdAu8:2)
at Function.each (jquery.min.js?v=FgpCb_KJQlLNfOu91ta32o_NMZxltwRo8QtmkMRdAu8:2)
at E.fn.init.each (jquery.min.js?v=FgpCb_KJQlLNfOu91ta32o_NMZxltwRo8QtmkMRdAu8:2)
at E.fn.init.val (jquery.min.js?v=FgpCb_KJQlLNfOu91ta32o_NMZxltwRo8QtmkMRdAu8:2)
at new init (kendo.all.min.js:40)
at init._pageable (kendo.all.min.js:60)
at new init (kendo.all.min.js:57)
at HTMLDivElement.<anonymous> (kendo.all.min.js:26)
at Function.each (jquery.min.js?v=FgpCb_KJQlLNfOu91ta32o_NMZxltwRo8QtmkMRdAu8:2)
It looks like there is a conflict between the libraries.This is how page looks like:
<!DOCTYPE html>
<html>
<head>
<title>Report Viewer Demo</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="/lib/telerik.kendo-ui/css/kendo.common.min.css" />
<link rel="stylesheet" href="/lib/telerik.kendo-ui/css/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="/lib/telerik.kendo-ui/css/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="/lib/telerik.kendo-ui/css/kendo.bootstrap.mobile.min.css" />
<script src="/lib/jquery/jquery.min.js" asp-append-version="true"></script>
<script src="/lib/telerik.kendo-ui/js/kendo.all.min.js"></script>
<script src="/lib/telerik.reporting/telerikReportViewer-14.0.20.115.min.js"></script>
<script src="/lib/telerik.reporting/telerikReportViewer.kendo-14.0.20.115.min.js"></script>
<style>
#reportViewer1 {
position: absolute;
left: 5px;
right: 5px;
top: 50px;
bottom: 5px;
overflow: hidden;
font-family: Verdana, Arial;
}
</style>
</head>
<body>
<div class="row">
<a href="/">Go Home</a>
</div>
<div id="reportViewer1">
loading...
</div>
<div id="ddd"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#ddd").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
$("#reportViewer1")
.telerik_ReportViewer({
serviceUrl: 'https://localhost:44388/api/reports/',
//ReportSource - report description
reportSource: {
// The report can be set to a report file name
// or CLR type name (report class definition).
report: "Barcodes Report.trdp",
// Parameters name value dictionary
parameters: {
CompanyId: 1,
PatientId: 1
}
},
viewMode: telerikReportViewer.ViewModes.INTERACTIVE,
scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,
scale: 1.0
});
});
</script>
</body>
</html>
2 Answers, 1 is accepted
0
Accepted
Hi Vitaliy,
I noticed that you have referenced both:
- kendo.all.min.js
- telerikReportViewer.kendo-14.0.20.115.min.js
The latter is served by the REST Service in our newer versions and generally, you don't need to reference it. It is also a subset of 'kendo.all.min.js', hence it is not necessary to reference it when you have referenced 'kendo.all.min.js'.
I pasted your code in a new web page in our Html5 Viewer demo and reproduced a similar error related to 'HTMLSelectElement.pageSize'. When I removed the reference to 'telerikReportViewer.kendo-14.0.20.115.min.js' both the Kendo Grid and the Telerik Report Viewer were displayed.
Regards,
Todor
Progress Telerik
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Feedback Portal
and vote to affect the priority of the items
0
Vitaliy
Top achievements
Rank 1
Rank 1
answered on 18 Feb 2020, 08:09 PM
Thank you, removed 'telerikReportViewer.kendo-14.0.20.115.min.js' link and Kendo grid with report work fine on the same html page