HTML5 Report Viewer Widget

[Nick]

Hi,

 I'm trying to use the HTML5 Report View Widget outside of the Report Server Application.

Below is my configuration of the widget. When the page is run, it gets the client id, but fails on trying to get the parameters. I get the error: Unable to get report parameters:
Report 'ReportTemplate.trdx' cannot be resolved.

How should I specify the report source so that I can access it outside of the telerikreportserver application?

Thanks!

serviceUrl: "http://localhost/telerikreportserver/api/reports/",
templateUrl: 'telerikReportViewerTemplate-9.0.15.324.html',
reportSource: {
   report: "ReportTemplate.trdx",
}

[Stef]

Hello Nick,

If your intent is to use Telerik Reporting, details how to start creating Telerik Reports and display them in viewers are available in the Quickstart help section. For the purpose, my recommendation is to start with the provided Report Designers. The overview articles contain descriptions of the designers UI.

To start test to create a new ClassLibrary project with the minimum system requirements of Telerik Reporting, and add a new item.  To connect your data, you can use any of the reporting data source components, where you can use report parameters to control the data retrieval e.g. SqlDataSource Wizard step 4 which is based on Using Parameters with the SqlDataSource component.
An example of supplying data via service is available in the Connecting Telerik Reporting to OData feeds blog post.
The same can be accomplished with the Standalone Report Designer.


Then to display the created report my recommendation is to use the HTML5 Report Viewer.

In general, the HTML5 Report Viewer is a client-side widget served only by a running Reporting REST service, which is dedicated to display already created reports. It is the service that manages the report state and resources. The viewer is a composite of Telerik Kendo UI widgets, wrapped in a jQuery widget, where we provide also an MVC wrapper. There is no automatic transition between the HTML5 Viewer and the legacy WebForms ReportViewer control, but we plan providing a WebForms wrapper of the HTML5 Report Viewer.

You are not required to purchase both products, you can use Telerik Kendo UI CSS and JS files for the purpose of displaying a viewer - Telerik End User License Agreement for Telerik Reporting and Telerik Report Designer (point 4.2).


Details how to add the viewer via VS item template are available in the HTML5 Report Viewer Quickstart article. Note the viewer and its content are rendered in a DIV element with the ID of the viewer, and if you use the VS template to add the viewer we provide default CSS rules, which can be changed based on your layout (e.g. do not use absolute position for the DIV element).


How the viewer(client)-service pair works:

Basically, the client (viewer) sends string description of the requested report (the viewer's reportSource.report value) to the service, and depending on the report resolvers used in the service's configuration, this string description will be resolved to a report source object.
By default we provide ReportFileResolver and ReportTypeResolver, which allows you to work with reports saved as TRDX files or built in a DLL, where reports must be accessible by the service e.g. the DLL must be referenced in the service's project or the TRDX files' folder must be mapped by the ReportsControllerBase - CreateReportResolver - ReportFileResolver method.
You can also create your own report resolvers as in the example in the How To: Implement a Custom Report Resolver article (useful if you need to customize the report before displaying it via InstanceReportSource).

Depending on how the application will be hosted, you can use the corresponding cache storage for the service - REST Service storage. If the service will be hosted separately, and will use a different domain you may need to enable CORS to allow the communication between the clients(viewers) and the service.


For a working demo, check the local examples installed by default under C:\Program Files (x86)\Telerik\Reporting <VERSION>\Examples\CSharp.


The recommended troubleshooting approach when using the viewer is to use the browser's Console or download and install Fiddler. In Fiddler - Inspectors - Request/Response - Raw tabs will be listed information about the made request and its response, including a list of all performed requests for the page.


Let us know if we can be of any further help for you.

Regards,
Stef
Telerik

[Nick]

Sorry, I think I wasn't clear enough in my first post.  I think my problem boils down to I need to use a report template from ReportServer for the report parameter in reportSource.  I have a template successfully loaded into the ReportServer that I can view, I just want to access it with the javascript in my Report Viewer widget.  Could it simply be a problem with the file path I'm using or are there more steps involved?

 

Thanks again.

[Stef]

Hi Nick,

If I understand correctly you have Telerik Reporting Server (CTP) and have uploaded a TRDX file there. Now you need to access the same TRDX file from another custom application that has its own HTML5 viewer, such integration is predicted for future releases where the server will be usable from different clients.

With the available builds, you will need to created a separate application with its own HTML5 viewer,  Reporting REST service and copy of the report (TRDX). For the purpose please check the HTML5 Viewer Quick Start.

Regards,
Stef
Telerik