HTML5 Viewer in AngularJS project

7 posts, 0 answers
  1. KS
    KS avatar
    5 posts
    Member since:
    Dec 2012

    Posted 19 Apr 2016 Link to this post


    Telerik Product and Version

    Reporting Q1 2016+

    Supported Browsers and Platforms

    .NET4+, AngularJS

    Components/Widgets used (JS frameworks, etc.)

    HTML5 Report Viewer

    Telerik Reporting HTML5 Viewer can be added in an AngularJS application. The Reporting REST service can be hosted separately in a standard .NET WebApplication. 

    The included script.js contains the logic for creating the viewer object and for updating an already existing viewer's reportSource. The start page is index.html.

  2. Mohamed
    Mohamed avatar
    5 posts
    Member since:
    May 2016

    Posted 11 May 2016 in reply to KS Link to this post


    Thank you very much for the sample code. It is working well.

    I added a new .cs report named Questions.cs under Report folder. I am getting error "
    Error from report directive:Unable to get report parameters.<br/>Report 'Reports%2FQuestions.cs' cannot be resolved".

    In the example code it is invoking .trdx files; not .cs files

    Added below code in script.js

    .state("reports.questions", {
              url: "/questions",
              reportSettings: {
                  title: "Questions Report",
                  reportName: "Reports/Questions.cs",
                  reportParams: {}


    Please find the attached, sample code with my changes

  3. Mohamed
    Mohamed avatar
    5 posts
    Member since:
    May 2016

    Posted 12 May 2016 in reply to Mohamed Link to this post

    Resolved the above issue by adding the cs file in a library project and giving "Libraryname.classname, Librayname" as report name parameter.
  4. Stef
    Stef avatar
    3611 posts

    Posted 13 May 2016 Link to this post

    Hi Mohamed,

    This is the correct approach, when you need to display a VS report. For more details, please check How to: Set ReportSource for Report Viewers (HTML5 Viewer).

    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
  5. Raji
    Raji avatar
    8 posts
    Member since:
    Jun 2017

    Posted 16 Jun in reply to KS Link to this post

    I need to integrate report into my project using angularjs.. have any integration video demo or documentation from scratch?
  6. Daniel
    Daniel avatar
    3 posts
    Member since:
    Jun 2017

    Posted 12 Jul in reply to Stef Link to this post

    Hi Stef,

    Is there an sample of the Report Viewer using Angular 2 (TypeScript) available?




  7. Peter
    Peter avatar
    1 posts
    Member since:
    Jul 2016

    Posted 29 Sep Link to this post

    This was a great article, and worked perfectly for me for 2016 R2, but I recently upgraded to and now the HTML Report viewer is failing to pass parameters to the service any more...


    When /parameters is called, the payload is accurate:


    {report: "DPR081.trdp", parameterValues: {RPAID: [240]}}
    parameterValues:{RPAID: [240]}


    But when it calls /instances, it omits the parameter name:


    {report: "DPR081.trdp", parameterValues: {undefined: [240]}}
    parameterValues:{undefined: [240]}

    There's been no change to my controller code server side or in the JS, the only thing I did was upgrade the Telerik Client Side JS and the Server Side DLLs.  


    Anyone else run into this yet?





Back to Top