Progress® Telerik® Reporting R3 2021

New to Telerik Reporting? Download free 30-day trial

HTML5 Report Viewer in ASP.NET Core 2

In case you are not familiar with ASP.NET Core, check it out on the official page.

Telerik Reporting ASP.NET Core packages are available as of Telerik Reporting R3 2016 SP1 release. They are built against the full .NET Framework.

Telerik NuGet Packages include the Reporting Engine and implementation of the Reporting REST WebAPI based service. The packages do not include design-time support.

Designing the Reports

.NET Core don't have design time support. Our recommendation is to design reports in a separate Telerik Report Library (Class Library created for .NET Framework 4.0+) or to use the Overview.

Supported Environment

Telerik Reporting ASP.NET Core package is built against the full .NET Framework because the Reporting engine relies on the GDI+ API, that is available only on Windows OS. The GDI+ API is required for measuring, layouting and preparing the text glyphs.

For targeting non-Windows platforms with ASP.NET Core Application, add the HTML5 Viewer as a JavaScript widget, which does not require any Telerik NuGet packages. The Reporting REST service can be hosted separately on a Windows OS machine, where the HTML5 Viewer will need the address of the service to display content produced on the remote machine. More details about hosting the Reporting REST Service are available in How to Add Telerik Reporting REST Web API to Web Application and How to Self Host Telerik Reporting REST Web API.

Connection Strings and Engine Configuration

Telerik Reporting relies on the ConfigurationManager to resolve named connection strings and to configure the reporting engine. Thus add any named connectionstrings or Telerik Reporting configuration to the project's root app.config configuration file. For more information see: Overview.


Creating a Sample ASP.NET Core Project

  1. Open Visual Studio 2017 Update 3.

  2. From the File menu, select New > Project.

  3. In the New Project dialog, expand Installed > Visual C# > .NET Core, and select ASP.NET Core Web Application project template. Choose a name for the project and click OK.

  4. On the New ASP.NET Core Web Application dialog select from the drop downs .NET Framework and ASP.NET Core 2. Next from the list of templates select API.

    If .NET Framework cannot be selected from the Visual Studio 2017 UI it will be necessary to manually edit the targeted framework in the project file (.csproj) Here is the step-by-step guide:

    1. Unload the project - right click on it and select 'Unload Project'.

    2. Right click on the unloaded project and select 'Edit YourProjectName.csproj'. The .csproj file opens in the VS for editing.

    3. Change the PropertyGroup section to look like:


      For another .NET Framework (for example 4.7.1) the value should be changed accordingly (for the example - net471), etc. Save the .csproj file.

    4. Reload project - right click on the unloaded project and select 'Reload Project'.

Adding the required NuGet Packages

ASP.NET Core does not support references to assemblies, but instead works with NuGet packages.

If the project refers Microsoft.AspNetCore.All package the latter should be removed from Dependencies->NuGet - right click on the package and select 'Remove'.

In this case the following packages should be added manually to the project - right click on the project and select 'Manage NuGet Packages...':

  • Microsoft.AspNetCore

  • Microsoft.AspNetCore.Mvc

To setup the Reporting REST service download Telerik.Reporting and Telerik.Reporting.Services.AspNetCore NuGet packages from the private Telerik NuGet feed at How to add a NuGet feed is explained in

Telerik account is required to access the private repository.

For static files support add Microsoft.AspNetCore.StaticFiles Microsoft.AspNetCore.StaticFiles NuGet package.

For Office OpenXML document formats (XLSX, DOCX and PPTX) install the DocumentFormat.OpenXML NuGet package. The package support out of the box version For newer versions binding redirect in the app.config is required.

Setting up the REST service

  1. In the project, right-click Dependencies, choose Manage NuGet Packages and from the drop down menu, select Telerik private feed.

  2. Install Telerik.Reporting and Telerik.Reporting.Services.AspNetCore NuGet packages, which will give the Telerik Reporting REST Service functionality and the reporting engine.

  3. Implement a Reports controller. Right-click on the Controllers folder and add a new item: Add - New item - Web API Controller Class item. Name it ReportsController. This will be our Telerik Reporting REST service in the project.

    Inherit the ReportsControllerBase type and provide proper settings for ReportSourceResolver and Storage. This is how a basic implementation of the controller should look like:

    namespace WebApplication1.Controllers
        using System.IO;
        using System.Linq;
        using System.Collections.Generic;
        using Microsoft.AspNetCore.Hosting;
        using Microsoft.AspNetCore.Mvc;
        using Telerik.Reporting.Cache.File;
        using Telerik.Reporting.Services;
        using Telerik.Reporting.Services.AspNetCore;
        public class ReportsController : ReportsControllerBase
            string reportsPath = string.Empty;
            public ReportsController(IHostingEnvironment environment)
                this.reportsPath = Path.Combine(environment.WebRootPath, "Reports");
                this.ReportServiceConfiguration = new ReportServiceConfiguration
                    HostAppId = "Html5DemoApp",
                    Storage = new FileStorage(),
                    ReportSourceResolver = new TypeReportSourceResolver()
                                        .AddFallbackResolver(new UriReportSourceResolver(this.reportsPath)),
            public IEnumerable<string> GetReports()
                return Directory
                    .Select(path =>

Adding the HTML5 Report Viewer

  1. To set up a folder for the reports, right-click on wwwroot and select Add > New Folder. Name the folder Reports and add sample reports in TRDP format. Find the sample reports in {Telerik Reporting installation path}\Report Designer\Examples Note that the name of the folder is considered with the folder path used by the UriReportSourceResolver in the ReportsController.

    This tutorial will use Barcodes Report.trdp in all examples.

  2. Add a HTML Page for the HTML5 Report Viewer.

  3. Add the HTML5 Report Viewer. For a detailed explanation, check the HTML5 Report Viewer Manual Setup help article. The required references to jQuery and Telerik Kendo UI CSS and JS files are listed in the example below. Copy the Kendo subset from {Telerik Reporting installation path}\Html5\ReportViewer folder to wwwroot.

    The complete report viewer page should look like this:

    <!DOCTYPE html> 
        <meta charset="utf-8" /> 
        <script src="" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
        <link href="" rel="stylesheet" /> 
        <link href="" rel="stylesheet" /> 
        <script src="telerikReportViewer.kendo-<token>buildversion</token>"></script> 
        <script src="/api/reports/resources/js/telerikReportViewer-<token>buildversion</token>"></script> 
            #reportViewer1 { 
                position: absolute; 
                left: 5px; 
                right: 5px; 
                top: 50px; 
                bottom: 5px; 
                overflow: hidden; 
                font-family: Verdana, Arial; 
        <div id="reportViewer1"> 
            $(document).ready(function () { 
                        serviceUrl: "api/reports/", 
                        reportSource: { 
                            //report: "Telerik.Reporting.Examples.CSharp.ReportCatalog, CSharp.ReportLibrary", 
                            report: "Barcodes Report.trdp", 
                            parameters: {} 
                        viewMode: telerikReportViewer.ViewModes.INTERACTIVE, 
                        scaleMode: telerikReportViewer.ScaleModes.SPECIFIC, 
                        scale: 1.0

    The reference to the report viewer's JavaScript file (telerikReportViewer-x.x.x.x.min.js) should be updated to the corresponding version of the Reporting NuGet package.

  4. Set the launchSettings.json launchUrl to the new HTML page.

  5. Finally, run the project to see the report.

In this article
Not finding the help you need?