Report Viewer for AngularJS app

8 posts, 0 answers
  1. Rav
    Rav avatar
    36 posts
    Member since:
    Nov 2011

    Posted 26 Nov 2014 Link to this post

    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
  2. Stef
    Admin
    Stef avatar
    3041 posts

    Posted 28 Nov 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. DevCraft banner
  4. V
    V avatar
    8 posts
    Member since:
    Sep 2014

    Posted 06 Jul 2015 in reply to Stef Link to this post

    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.

  5. Stef
    Admin
    Stef avatar
    3041 posts

    Posted 07 Jul 2015 Link to this post

    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
    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
  6. Mohamed
    Mohamed avatar
    5 posts
    Member since:
    May 2016

    Posted 11 May in reply to Stef Link to this post

    Could you post an example please?
  7. Stef
    Admin
    Stef avatar
    3041 posts

    Posted 11 May Link to this post

    Hi Mohamed,

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

    Regards,
    Stef
    Telerik
    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
  8. Mohamed
    Mohamed avatar
    5 posts
    Member since:
    May 2016

    Posted 13 May in reply to Stef Link to this post

    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.

  9. Stef
    Admin
    Stef avatar
    3041 posts

    Posted 14 May Link to this post

    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
    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
Back to Top
DevCraft banner