The following article is applicable to Telerik Reporting versions R1 2019 and above. It elaborates on how to host Telerik Reporting REST Service and add HTML5 Report Viewer in an ASP.NET Core 2.1 and 2.2 web application.

Designing the Reports

For design-time support, it is recommended to use the Standalone Report Designer for creating reports or migrate the existing ones to TRDP/TRDX report definitions. The other available approach is designing reports in a separate Telerik Report Library created against .NET Framework 4.0+ which later must be migrated to a .NET Standard or .NET Core library. For more information, please refer to Guidance for using reports from an existing .NET Framework 4+ report library in a .NET Core application knowledge based article. Design-time support is not yet provided for .Net Core Telerik Report Library (Class Library) projects storing the report definitions.

Supported Environment

As of R1 2019 release, the Telerik Reporting ASP.NET Core packages are built against .NET Standard 2.0 framework which ensures compatibility with a greater variety of frameworks and applications. The recommended way to reference the Telerik Reporting assemblies into Core projects is to install their NuGet packages. The assemblies are available in the \Bin\netstandard2.0\ folder of Telerik Reporting installation directory as well. The external dependencies are resolved through NuGet package dependencies in order to provide better dependency management and code portability. The Reporting engine relies on the GDI+ API which is available on the Windows OS. On Linux and macOS we use library called libgdiplus instead. The GDI+ API is required for measuring, laying out, rendering the text glyphs and images.

Connection Strings and Engine Configuration

.NET Core applications provide new way of storing the configuration - a key-value JSON-based file named appSettings.json. To activate JSON file configuration, call the AddJsonFile extension method on an instance of ConfigurationBuilder. Add a new class, for example named ConfigurationService to your application assets as shown below:

public class ConfigurationService
    public IConfiguration Configuration { get; private set; }

    public IHostingEnvironment Environment { get; private set; }
    public ConfigurationService(IHostingEnvironment environment)
        this.Environment = environment;

        var configFileName = System.IO.Path.Combine(environment.ContentRootPath, "appsettings.json");
        var config = new ConfigurationBuilder()
                        .AddJsonFile(configFileName, true)

        this.Configuration = config;

Add a singleton service of type ConfigureService to the container services.

Finally, all configurations should be placed in appsettings.json. For example ConnectionStrings setting should be configured in JSON-based format like this:

  "ConnectionStrings": {
    "Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString": "Data Source=.\\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=true"

The above type of connection string lacks information about the data provider and will use System.Data.SqlClient as provider invariant name. When it's necessary to specify a different data provider, the following notation is also supported:

  "ConnectionStrings": {
    "Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString": {
      "connectionString": "Data Source=.\\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=true",
      "providerName": "System.Data.SqlClient"

The two types of connection string notations specified above can coexist in a single ConnectionStrings section.

The last supported type of ConnectionStrings configuration uses an array to provide information about each connection string:

  "ConnectionStrings": [
      "name": "Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString",
      "connectionString": "Data Source=.\\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=true",
      "providerName": "System.Data.SqlClient"


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# > Web, 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 Core and ASP.NET Core 2.1. Next from the list of templates select API.

Adding the required NuGet Packages

In the Requirements section, there are listed the NuGet packages that need to be included to a .NET Core application that uses Telerik Reporting. These dependencies are automatically resolved when using the Telerik.Reporting.Services.AspNetCore package. Otherwise they need to be manually added to the project.

To setup the Reporting REST service reference 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 and Telerik.Reporting.OpenXmlRendering NuGet packages. The DocumentFormat.OpenXML package support out of the box version and above.

Setting up the REST service

  1. 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.

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

    namespace CSharp.AspNetCoreDemo.Controllers
        using System.Collections.Generic;
        using System.IO;
        using System.Linq;
        using Microsoft.AspNetCore.Mvc;
        using Telerik.Reporting.Services;
        using Telerik.Reporting.Services.AspNetCore;
        using System.Net;
        using System.Net.Mail;
        using Telerik.Reporting.Cache.File;
        public class ReportsController : ReportsControllerBase
            readonly string reportsPath = string.Empty;
            public ReportsController(ConfigurationService configSvc)
                this.reportsPath = Path.Combine(configSvc.Environment.WebRootPath, "Reports");
                this.ReportServiceConfiguration = new ReportServiceConfiguration
                    ReportingEngineConfiguration = configSvc.Configuration,
                    HostAppId = "Html5DemoAppCore",
                    Storage = new FileStorage(),
                    ReportResolver = new ReportTypeResolver()
                                        .AddFallbackResolver(new ReportFileResolver(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 will be concatenated with the path used by the ReportFileResolver in ReportsController initialization.

    This tutorial will use Barcodes Report.trdp in the examples folder.

  2. Add a HTML Page for the HTML5 Report Viewer by right-clicking on wwwroot and Add > New Item... > HTML Page. Name the file index.html and add the HTML5 Report Viewer's initialization. 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> 
    <html xmlns="">
      <title>Telerik HTML5 Report Viewer Demo in ASP.NET Core</title>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
      <script src=""></script> 
      <link href="" rel="stylesheet" /> 
      <link href="" rel="stylesheet" /> 
      <script src="/api/reports/resources/js/telerikReportViewer"></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: "Barcodes Report.trdp", 
                          parameters: {} 
                      viewMode: telerikReportViewer.ViewModes.INTERACTIVE, 
                      scaleMode: telerikReportViewer.ScaleModes.SPECIFIC, 
                      scale: 1.0,
                      enableAccessibility: false,
                      sendEmail: { enabled: true }
  3. Set the launchSettings.json launchUrl to the new HTML page.

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

In this article
Not finding the help you need?