Progress® Telerik® Reporting R2 2019

How To: Use HTML5 Report Viewer With REST Service

The quickest way to add a HTML5 Report Viewer to your web project is with the Telerik HTML5 Report Viewer item template in Visual Studio.

For full control you can manually configure the REST service and add the HTML5 Report Viewer as elaborated in Manual Setup help article.

Prerequisites

  1. Review the HTML5 Report Viewer Requirements.

  2. All path references in the described steps should be adapted according to your project setup. For more information please refer to the MSDN article ASP.NET Web Project Paths

Telerik HTML5 Report Viewer Page Item Template

The VS item template will integrate HTML5 Report Viewer in a .html page and will enable the Telerik Reporting REST WebAPI Service. The following describes what steps you should perform in order to add it in your application:

  • To start the item template wizard, in Solution Explorer, select the target project. On the Project menu, click Add -> New Item. In the Add New Item dialog box, navigate to the Web category. Select Telerik HTML5 Report Viewer Page item.

  • You will be prompted to accept building the project. Click 'OK'.

  • The item template will open the 'Add new Report Viewer' dialog with the following steps:

    1. 'Configure reporting engine' will configure the type of reporting engine that will process and render the reports. You have two options - REST service or Report server. Choose Rest service option. This way, the reports will be processed and rendered by the REST service on specified URL. On the right side of the dialog there are two options:

      • Create new REST service - in case there is no REST service project setup in the solution. Choosing this option, the REST Service will be configured within the project.

      • Use existing REST service - in case there is a REST service already configured. Choosing this option, you will have to enter a valid REST service URI.

      item-template-reporting-engine-rest
    2. 'Configure report source' will choose a report definition for the report viewer. If Create new REST service option was previously selected, you will have to choose one of the following three options. If, however, Use existing REST service option was previously selected, you will only have the option to choose from an existing report definitions.

      • Sample report definition - this option will create a sample report definition which will be shown in the new report viewer. It will be placed in a newly created folder called Reports at the root of the application. It can be either modified or changed with another.

      • New report definition - this option will create a new report definition that will be opened for editing in the respective report designer. On the right side of the dialog there are two possible options:

        • TRDP report definition - will create a TRDP file with the entered Report name.

        • Type report definition - will create a CS|VB file with the entered Report name either in an existing report library project or in a newly created one.

      • Existing report definition - this option will prompt you to choose an existing report definition that will be shown in the report viewer. On the right side of the dialog there are three possible options:

        • TRDP, TRBP or TRDX report definition - enter the path or browse to the report definition. Also, there is an option to enable adding the report definition to the project. In this case the report viewer will use a UriReportSource with the provided path to the file.

        • Enter type report definition created in Visual Studio - enter the Assembly qualified name of the type report definition. In this case the report viewer will use a TypeReportSource with the provided Assembly qualified name.

        • Select type report definition created in Visual Studio - select the type report definition from the resolved types in the solution. The engine will search for report types in all projects in the solution that have Telerik Reporting reference included. The VS item template will add the required connection string from the reports project configuration file (if exists).

      item-template-report-source-rest
    3. 'Configure Report Viewer' exposes the option to enable accessibility for the report viewer.

      Item Template Accessibility

After finishing, the item template automatically do the following:

  • Configures the NuGet packages, if nessesary.

  • Registers the service routes in the WebApiConfig.cs.

  • Adds a HTML page with the configured HTML5 Report Viewer.

  • Displays a summary log that list all of the made changes.

Examples

You can find the complete example setup in Telerik Reporting installation path. For example, C:\Program Files (x86)\Progress\Telerik Reporting {VERSION}\Examples\CSharp\Html5Demo.

See Also

In this article
Not finding the help you need?