Telerik HTML5 Report Viewer - Error loading the report viewer's templates

Question

I'm having an issue trying to use Telerik REST services and their HTML5 Report Viewer.

Here's my scenario:

I have a C# console application which is hosting the REST services API. I have set this project up as per Telerik's article: How To: Self Host Telerik Reporting REST Web API. This seems to be working without issue. I am able to go to http://localhost:8080/api/reports/formats and I get the expected results, which suggests to me the REST server is available and is processing requetss.

I then set up a separate project to run the report viewer. This is a C# Windows forms application, which has a WebBrowser element pointing to the URL of my report viewer HTML file. The Report Viewer HTML file is the default generated file when you create a new Telerik HTML 5 Report Viewer in Visual Studio - it builds all of the necessary pieces for you. Here is the code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Telerik HTML5 Report Viewer</title>

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

    <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.blueopal.min.css" rel="stylesheet" />

    <!--kendo.all.min.js can be used as well instead of kendo.web.min.js and kendo.mobile.min.js-->
    <script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.web.min.js"></script>
    <!--kendo.mobile.min.js - optional, if gestures/touch support is required-->
    <script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.mobile.min.js"></script>

    <link href="ReportViewer/styles/telerikReportViewer-9.0.15.324.css" rel="stylesheet" />
    <script src="ReportViewer/js/telerikReportViewer-9.0.15.324.min.js"></script>

  <style>
        #reportViewer1 {
            position: absolute;
            left: 5px;
            right: 5px;
            top: 5px;
            bottom: 5px;
            overflow: hidden;
            font-family: Verdana, Arial;
        }
    </style>
</head>
<body>

    <div id="reportViewer1">

    </div>

       <script type="text/javascript">

           $(document).ready(function () {
               $("#reportViewer1")
                   .telerik_ReportViewer({ 


                       serviceUrl: "http://localhost:8080/api/reports/",

                       templateUrl: "ReportViewer/templates/telerikReportViewerTemplate-9.0.15.324.html",
                       //ReportSource - report description
                       reportSource: {
                           report: "Reports/SampleReport.trdx",                          
                           parameters: {
                               Date: new Date(),
                           }
                       },

                       viewMode: telerikReportViewer.ViewModes.INTERACTIVE,                 
                       scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,
                       scale: 1.0,

                       ready: function () {
                           //this.refreshReport();
                       },
                   });
           });
    </script>

</body>
</html>

When I run this appliaction, the web browser loads the page, but then displays " Error loading the report viewer's templates." I've tried putting the templates on the server side of things, but I can't seem to figure out what I'm doing wrong.

If anybody has any suggestions as to what I could try to resolve this error, I would very much appreciate it! I am using Telerik 2015 Q1.

Thanks!

It's not the serviceUrl. Is the templateUrl path corect? From what i remember that template shouldn't contain the version number. — Zippy
the templateUrl path is correct as far as I can tell. The version number you see there is simply part of the file name. I have tried renaming the file to not have a version number, but to no avail. — Keith

Keith Keith · Accepted Answer · 2016-02-04T17:49:57

I have found my problem. Turns out it was a cross-origin problem. I ended up taking my required templates and scripts and such, and hosting them on a simple IIS page on the server, and reference them using an absolute URL. That has gotten me around the issue I was having.

Telerik HTML5 Report Viewer - Error loading the report viewer's templates

1 Answers