Report Viewer for AngularJS app

[Rav]

Hi Guys

Is there any way to use the Telerik ReportViewer inside an AngularJS app? From what I've read the report viewer, even the HTML version, is still a server side control and needs ASP.NET to work, is that right ? I want to be able to view our telerik reports from a separate web client app.

Help appreciated

Rav

[Stef]

Hi Rav,

There is no AngularJS wrapper for the HTML5 Report Viewer. The HTML5 Report Viewer is composite of standard HTML elements and already existing Telerik Kendo UI widgets.

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. More details how the viewer and the service work, and how to set them manually in a project are available in this forum thread (all tutorials for using the viewer and the service are linked in the thread).

Details how to add the viewer via template are available in the HTML5 Report Viewer Quickstart article


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 in the service's CreateReportResolver method this string description will be resolved to a report source object.
By default we provide ReportFileResolver and ReportTypeResolver. You can also create your own report resolvers as in the example in the How To: Implement a Custom Report Resolver article.

Depending on how the application will be hosted, you can use the corresponding cache storage for the service - REST Service storage.


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


To use it in an AngularJS application, you need to load an HTML page with the DIV element that will be loaded with the viewer's template and the rendered report. Then call the Javascript (HTML5 Report Viewer jQuery widget) which loads the content.


Let us know if you need any further help.

Regards,
Stef
Telerik

 

 

[V]

Hi Stef

 Can you share some simple examples how telerik reporting can be used in angularjs application...

we have some drill-able reports with charts and we plan to use telerik reporting for our angularjs application.

[Stef]

Hello V,

The HTML5 Viewer can be used in AngularJS application, where the DIV element hosting the viewer must be loaded before creating the Javascript object. Please test the following:

1. Create an empty Web application and use the VS item template to add the HTML5 viewer and Reporting REST service;
2. Copy the HTML page with the viewer and place it in your AngularJS application;
3. Change the viewer's serviceUrl to point to the URL of the Reporting REST service in the Web application created at step1.
   You may need to enable CORS to allow the communication between the viewer and the service.

If you need to use a report created by VS Report Designer, change the viewer's reportSource.report setting to be the assembly qualified name of the report added or referenced in the service's project.

Regards,
Stef
Telerik

[Mohamed]

Could you post an example please?

[Stef]

Hi Mohamed,

Please check the HTML5 Viewer in AngularJS project code library post.

Regards,
Stef
Telerik

[Mohamed]

Hi,

I will have multiple databases with same structure. Database from which report has to be generated will be decided on the fly from a master database. Report file will be common. So how can I set the connection string dynamically?

Note: I am using angualr js and HTML5.

[Stef]

Hi Mohamed,

Reports are processed and rendered on the server.

The HTML5 Viewer is a client-side widget that requests resources via short string messages. It is the Reporting RESt service that handles the requests and delivers the resources to the client.


Having the above into account, you can create a custom resolver for the Reporting REST service allowing you to deserialize TRDX files or to get instances of VS reports, and then to modify DataSource properties of data items in the report. An example of updating all DataSource properties in a report is illustrated in

Changing the connection string dynamically according to runtime data.

Regards,
Stef
Telerik