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+ 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:

JSON
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)
                        .Build();

        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:

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

Prerequisites

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 https://nuget.telerik.com/nuget. How to add a NuGet feed is explained in https://www.visualstudio.com/en-us/docs/package/nuget/consume. 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 2.7.2.0 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.

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

    C#
    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;
    
        [Route("api/reports")]
        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)),
                };
            }
    
            [HttpGet("reportlist")]
            public IEnumerable<string> GetReports()
            {
                return Directory
                    .GetFiles(this.reportsPath)
                    .Select(path =>
                        Path.GetFileName(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 ReportFileResolver in the ReportsController.

    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:

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

    HTML
    <!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
      <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="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
    
      <link href="http://kendo.cdn.telerik.com/<token>kendosubsetversion</token>/styles/kendo.common.min.css" rel="stylesheet" /> 
      <link href="http://kendo.cdn.telerik.com/<token>kendosubsetversion</token>/styles/kendo.blueopal.min.css" rel="stylesheet" /> 
    
      <script src="/api/reports/resources/js/telerikReportViewer.kendo-<token>buildversion</token>.min.js"></script> 
      <script src="/api/reports/resources/js/telerikReportViewer-<token>buildversion</token>.min.js"></script> 
    
      <style> 
          #reportViewer1 { 
              position: absolute; 
              left: 5px; 
              right: 5px; 
              top: 50px; 
              bottom: 5px; 
              overflow: hidden; 
              font-family: Verdana, Arial; 
          } 
      </style> 
    
    </head> 
    <body> 
      <div id="reportViewer1"> 
          loading... 
      </div> 
    
      <script> 
          $(document).ready(function () { 
              $("#reportViewer1") 
                  .telerik_ReportViewer({ 
                      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 }
                  }); 
          }); 
      </script> 
    </body> 
    </html>
  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?