Chrome Telerik Report Issue with JQuery

[Dev]

We are facing an issue with our Telerik report in Chrome browser. It was perfectly fine until now, however we can access the report with other browsers like Firefox.

It seems that there is an update in JQuery which is causing problem, there is a warning message we are getting in developer console of Chrome "jquery-3.1.1.min.js:4 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/"

 

Telerik Report is loading fully but applying a CSS class trv-nav-input in a Chrome Browser with a height 99% to the report header hence covering the whole report. As soon as we fix the height of header, we can see the report.

 

The following is the report calling from Javascript

 reportViewer.reportSource({

                report: ReportSheet,
                parameters: {
                    "Parameter1": departmentId,
                    "Parameter2": employeeid,
                    "Parameter3": locationid,

               },
            });

 

Your immediate help will be greatly appreciated. 

[Stef]

Hi mohammed,

Telerik HTML5 Viewer's functionality depends on Telerik Kendo UI CSS and JS files. Please use a jQuery version compatible with the used Kendo UI version - JavaScript Prerequisites: jQuery.
Also check if external CSS rules are messing the HTML rendered for the HTML5 Viewer and its content by inspecting the HTML content and the style inheritance.

On a side note, we try to monitor forums, but we cannot guarantee you reply by Telerik representative in a timely manner. If it is an emergency, our recommendation is to use the support ticketing system.

Regards,
Stef
Telerik by Progress

[Dev]

We have tried the Jquery that came with Kendo 2016.3.914, it was working fine but after some days it is showing up the same error in Chrome. 

This is how we are implementing it.

We are creating reportviewer through Kendo MVC helper and setting the CSS display to none. After setting the URI from Report library in different project we are calling the report from javascript. and showing the report using by setting display to block as follows

 $("#ReportViewerId").css("display", "block");

 

Here is the code.

 

 

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />


<script src="~/Scripts/kendo/2016.3.914/jquery.min.js"></script>

@*<script src="~/Scripts/kendo/2016.3.914/jquery.min.js"></script>*@
<link href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.blueopal.min.css" rel="stylesheet" />


<script src="~/Scripts/kendo/2016.3.914/kendo.all.min.js"></script>




    <div class="col-md-12" style="display:none;" id="ReportViewerId">

        @(Html.TelerikReporting().ReportViewer()

        .Id("reportViewer1")
        .ServiceUrl(Url.Content("/api/reports"))
          .ReportSource(report)

        .ViewMode(ViewMode.PrintPreview)
        .ScaleMode(ScaleMode.Specific)
        //.Scale(0.8)

        .Scale(1.2)

        .PersistSession(false)


        .PrintMode(Telerik.ReportViewer.Mvc.PrintMode.ForcePDFPlugin)

        )

    </div>




<style>
    #reportViewer1 {
        width: 100%;
        height: 100%;
        font-family: Verdana, Arial;
    }
</style>

 

        var reportViewer = $("#reportViewer1").data("telerik_ReportViewer");
reportViewer.UseNativePrinting = "False"
            reportViewer.viewMode(telerikReportViewer.PrintModes.PRINT_PREVIEW);

            reportViewer.reportSource({
                report: ReportSheet,
                parameters: {
                    Paremeters:Parameters

                },
            });

 

 

 

 

 

[Dev]

Please note that the code was working perfectly fine from last 2-3 months.

And it is working perfectly fine in FireFox, only the Google Chrome is giving the issue. Google Chrome version we have tested are all same. Sometimes it stops working after 1-2 days

 

 

 

[Stef]

Hello mohammed,

The attached screenshot is the result of displaying a view with the following settings:

@using AllowNullCheck
@{
    Layout = null;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Telerik MVC HTML5 Report Viewer</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

    <script src="http://kendo.cdn.telerik.com/2016.3.914/js/jquery.min.js"></script>
    <link href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.blueopal.min.css" rel="stylesheet" />
    <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>

    <style>
        #reportViewer1 {
            position: relative;
            width: 1300px;
            height: 900px;
            font-family: Verdana, Arial;
        }
    </style>

    <script src="@Url.Content("~/ReportViewer/js/telerikReportViewer-10.2.16.1025.min.js")"></script>

</head>
<body>

@(Html.TelerikReporting().ReportViewer()
        .Id("reportViewer1")
        .ServiceUrl(Url.Content("/api/reports"))
        .ReportSource(new TypeReportSource() { TypeName = typeof(AllowNullCheck.Reports.Report1).AssemblyQualifiedName })
        .ViewMode(ViewMode.PrintPreview)
        .ScaleMode(ScaleMode.Specific)
        .Scale(1.2)
        .PersistSession(false)
        .PrintMode(PrintMode.ForcePDFPlugin)
)

</body>
</html>

Let us know how to modify the code snippet to reproduce the problem. Feel free to open a support ticket and send us a demo project in a ZIP file.


On a side note, test clearing the browser's cache and reload the page with the viewer.

Regards,
Stef
Telerik by Progress

[Tim]

This is probably happening because you are displaying "mixed content" in your page.  Meaning, you are running your page under an "https" url in production, but your references to the "kendo.cdn" are going to an "http" url.  Chrome will no longer display pages which attempt to render "mixed content" (http + https content).