Kendo UI grid does not work if the html page references both Kendo UI and Telerik Reporting HTML5 javascript libraries

3 posts, 1 answers
  1. Vitaliy
    Vitaliy avatar
    3 posts
    Member since:
    Aug 2017

    Posted 12 Feb Link to this post

    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>
        <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/" />

        <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-"></script>
        <script src="/lib/telerik.reporting/telerikReportViewer.kendo-"></script>

            #reportViewer1 {
                position: absolute;
                left: 5px;
                right: 5px;
                top: 50px;
                bottom: 5px;
                overflow: hidden;
                font-family: Verdana, Arial;

        <div class="row">
            <a href="/">Go Home</a>
        <div id="reportViewer1">

        <div id="ddd"></div>

        <script type="text/javascript">
            $(document).ready(function () {
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: ""
                        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

                        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
  2. Answer
    Todor avatar
    453 posts

    Posted 17 Feb Link to this post

    Hi Vitaliy,

    I noticed that you have referenced both:

    • kendo.all.min.js
    • telerikReportViewer.kendo-

    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-' both the Kendo Grid and the Telerik Report Viewer were displayed.

    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
  3. Vitaliy
    Vitaliy avatar
    3 posts
    Member since:
    Aug 2017

    Posted 18 Feb in reply to Todor Link to this post

    Thank you, removed  'telerikReportViewer.kendo-' link and Kendo grid with report work fine on the same html page
Back to Top