Using the HTML5 Report Viewer with REST Service
The quickest way to add an HTML5 Report Viewer to a web project is with the Telerik HTML5 Report Viewer item template in Visual Studio.
For full control, manually configure the REST service and add HTML5 Report Viewer as elaborated in Manual Setup help article.
Prerequisites
- Review the HTML5 Report Viewer Requirements.
- Adapt all path references in the described steps according to the project setup. For more information, please refer to the MSDN article ASP.NET Web Project Paths
Telerik HTML5 Report Viewer Page Item Template
The item template adds.html page with HTML5 Report Viewer and if needed enables the Telerik Reporting REST WebAPI Service. The following describes the item template wizard steps:
- 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 and select the Telerik HTML5 Report Viewer Page item.
- Accept the project build prompt. Click 'OK'.
-
The item template will open the 'Add new Report Viewer' dialog with the following steps:
-
'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 the 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 will require to enter a valid REST service URI.
-
'Configure report source' will choose a report definition for the report viewer. If the Create new REST service option was previously selected, you will have to choose one of the following three options. If, however, the Use existing REST service option was previously selected, you will only have the option to choose an existing report definition.
- 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 it exists).
-
'Configure Report Viewer' exposes the option to enable accessibility for the report viewer.
-
After finishing, the item template automatically does the following:
- Configures the NuGet packages, if necessary.
- Registers the service routes in the WebApiConfig.cs.
- Adds a HTML page with the configured HTML5 Report Viewer.
- Displays a summary log that lists all of the made changes.
Examples
You can find the complete example setup in the Telerik Reporting installation path. For example, C:\Program Files (x86)\Progress\Telerik Reporting 2024 Q4\Examples\CSharp\Html5Demo.
If there are no examples in the Telerik Reporting installation path, you need to run the setup and enable the Examples feature.