This is a migrated thread and some comments may be shown as answers.

Chrome Telerik Report Issue with JQuery

5 Answers 118 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Dev
Top achievements
Rank 1
Dev asked on 10 Nov 2016, 06:14 AM

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. 

5 Answers, 1 is accepted

Sort by
0
Stef
Telerik team
answered on 10 Nov 2016, 12:19 PM
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
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
Dev
Top achievements
Rank 1
answered on 16 Nov 2016, 08:32 AM

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

                },
            });

 

 

 

 

 

0
Dev
Top achievements
Rank 1
answered on 16 Nov 2016, 08:46 AM

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

 

 

 

0
Stef
Telerik team
answered on 17 Nov 2016, 06:05 PM
Hello mohammed,

The attached screenshot is the result of displaying a view with the following settings:
@using AllowNullCheck
@{
    Layout = null;
}
<!DOCTYPE html>
<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" />
   
 
    <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
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
Tim
Top achievements
Rank 1
answered on 11 Sep 2017, 04:35 AM
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).
Tags
General Discussions
Asked by
Dev
Top achievements
Rank 1
Answers by
Stef
Telerik team
Dev
Top achievements
Rank 1
Tim
Top achievements
Rank 1
Share this question
or