Progress® Telerik® Reporting R3 2017

HTML5 Report Viewer in ASP.NET Core 2

The following article elaborates on how to host Telerik Reporting REST Service and add HTML5 Report Viewer in an ASP.NET Core 2 project.

Telerik Reporting ASP.NET Core packages are available as of Telerik Reporting R3 2016 SP1 release.

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 Standalone Report Designer.

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: Telerik Reporting Configuration Section.

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# > .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 Web API.

Adding the required NuGet Packages

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

To setup the Reporting REST service download 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 NuGet package. The package support out of the box version 2.7.2.0. For newer versions binding redirect in the app.config is required.

Setting up the REST service

  1. In the project, right-click References, 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 ReportResolver and Storage. This is how a basic implementation of the controller should look like:

    C#
    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;
    
        [Route("api/reports")]
        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(),
                    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 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:

    HTML
    <!DOCTYPE html> 
    <html> 
    <head> 
        <meta charset="utf-8" /> 
        <title></title> 
        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
    
        <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css" rel="stylesheet" /> 
        <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.blueopal.min.css" rel="stylesheet" /> 
    
        <script src="telerikReportViewer.kendo-11.2.17.913.min.js"></script> 
        <script src="/api/reports/resources/js/telerikReportViewer-11.2.17.913.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: "Telerik.Reporting.Examples.CSharp.ReportCatalog, CSharp.ReportLibrary", 
                            report: "Barcodes Report.trdp", 
                            parameters: {} 
                        }, 
                        viewMode: telerikReportViewer.ViewModes.INTERACTIVE, 
                        scaleMode: telerikReportViewer.ScaleModes.SPECIFIC, 
                        scale: 1.0, 
                    }); 
            }); 
        </script> 
    </body> 
    </html>
    Important note Important

    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.