HTML5 Viewer in Windows Forms client

[Eric]

I have a REST services console application which seems to be running successfully, in that I followed the instructions here: 

http://www.telerik.com/help/reporting/telerik-reporting-rest-host-http-service-using-self-hosting.html

and I'm able to serve up the document formats when I use IE to browse to:

http://localhost:8080/api/reports/formats

I have a Windows Form client in which I want to use an HTML5 report viewer, hosted in a System.Windows.Forms.WebBrowser.  

I used the Telerik wizard to add an HTML5 Report Viewer, which I assume added all the necessary references, and created a sample report, and the necessary report viewer in a new html file.  I am setting the url of the WebBrowser to the file location of my new report viewer html file, but I keep getting the following when I load the page:

Error loading the report viewer's templates.

I edited the default javascript to use the following:

 

<script type="text/javascript">
    $(document).ready(function () {
        $("#reportViewer1")
            .telerik_ReportViewer({
                serviceUrl: "http://localhost:8080/api/reports",
               templateUrl: "file://C:\Temp\Code\Reports\bin\Debug\ReportViewer\templates\telerikReportViewerTemplate-9.0.15.324.html",
                reportSource: {
                    report: "file://C:\Temp\Code\Reports\bin\Debug\Reports\SampleReport.trdx",
                    parameters: {
                        Date: new Date(),
                    }
                },
                viewMode: telerikReportViewer.ViewModes.INTERACTIVE,
                scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,
                scale: 1.0,
                ready: function () {
                    //this.refreshReport();
                },
            });
    });
</script>

Those two files exist at runtime (the template and the trdx file).

This is just proof-of-concept right now, so obviously the moving pieces are not all set.  My thought is that the wizard is designed to set up a Web solution, not a Windows Forms solution, so I'm not set up correctly.

So can anyone suggest anything that might be causing that error?

Thanks,

Eric.

[Eric]

I think to simplify my question, let me rephrase:

Can I run the Html5 Report Viewer html page as a local file?  Or does it have to be served up by IIS because there is some server-side processing necessary?  

I can get the page to come up if I load it into a WebBrowser object as a file reference, but I see:

Error loading the report viewer's templates.

Thanks,

Eric.

[Stef]

Hello Eric,

You will need:

1. Web Application with:
   • HTML page with the viewer
   • Hosted Reporting REST service, where the service will operate on the machine where it is hosted, and reports must be deployed along with the service
     
     To create such application use the HTML5 Viewer Quick Start, and host the application in local IIS.
2. WinForms project with WebBrowser control navigating to the URL of the HTML page.
   
   

In this scenario the serviceUrl, templateUrl, report paths will be searched on the server where the Web Application is hosted. This includes the viewer's CSS and JS files. Thus paths must be set based on the Web application.

Please check the attached demo projects illustrating the above suggested settings.

Regards,
Stef
Telerik

 

 

[Eric]

Hi Stef,

 So is the only issue that the templateUrl and reportSource parameters cannot handle "file" references, even if the files are on the server that hosts the REST service?

 Thanks,

Eric.

[Stef]

Hi Eric,

The request for the viewer's template files must be addressed to an URI on the server instead of a file.


For example test making a get request for a resource on the server like:

$.get("C:\SomeFile.html");

And there will be displayed a cross-origin error in the browser's console:

XMLHttpRequest cannot load file:///C:/SomeFile.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

The solution is to change the get request to get an URI like

$.get("http://www.example.com/SomeFile.html");

Regards,
Stef
Telerik