Progress® Telerik® Reporting R3 2017

HTML5 Report Viewer in ASP.NET Core

Important note Important

The following article elaborates on how to use Telerik Reporting in an ASP.NET Core 1 web application. For ASP.NET Core 2+ see the HTML5 Report Viewer in ASP.NET Core 2 article.

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

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

Important note Important

Telerik Reporting ASP.NET Core package is 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.

Before you start

The Reporting engine relies on the GDI+ API available only on WindowsOS machines. Without the GDI+ API reports cannot be rendered.

If you need to have your ASP.NET Core Application targeting more platforms, you can 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.

Caution note Caution

You might exprience issues with displaying images in the report if using ASP.NET Core 1.1.0 due to the way the requests are handled. It is recommended to upgrade to a newer version of ASP.NET Core - .NET Core releases


To be able to create the sample application on Windows, make sure you provide the requirements listed below.

Creating a Sample ASP.NET Core Project

  1. Open Visual Studio 2015 Update 3.

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

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

  4. From the ASP.NET Core Templates select Web Application.

Getting Ready to Add Telerik Reporting

You will have to prepare the project for Telerik Reporting.

Open the project.json file. The "frameworks" property should look like this:

"frameworks": {
    "net461": { }

The above setting is required since Telerik Reporting supports only the full .NET framework. Note, that using multiple target frameworks will force Visual Studio to build your project as if it will run on all frameworks, and ultimately you will not be able to start it.

Adding the NuGet Packages

ASP.NET Core does not support references to assemblies, but instead works with references to NuGet packages. To setup the Reporting REST service you have to 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

You will need to your Telerik account credentials for this operation.

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 your 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 you the functionality for the Telerik Reporting REST Service and the Reporting engine.

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

    You will have to inherit the ReportsControllerBase type and provide proper settings for the service's ReportResolver and Storage. This is how a basic implementation of the controller should look like:

    namespace WebApplication1.Controllers
        using System.IO;
        using Microsoft.AspNetCore.Hosting;
        using Telerik.Reporting.Cache.File;
        using Telerik.Reporting.Services;
        using Telerik.Reporting.Services.AspNetCore;
        public class ReportsController : ReportsControllerBase
            public ReportsController(IHostingEnvironment environment)
                var reportsPath = 
                    Path.Combine(environment.WebRootPath, "Reports");
                this.ReportServiceConfiguration = 
                    new ReportServiceConfiguration
                        HostAppId = "Html5DemoApp",
                        Storage = new FileStorage(),
                        ReportResolver = new ReportFileResolver(reportsPath),
                        // ReportSharingTimeout = 0,
                        // ClientSessionTimeout = 15,
  4. After the Reports controller is set up, you have to create an MVC page view with the HTML5 report viewer. To do so, open the HomeController, added by the VS ASP.NET Core project template, and add an action method named Report:

    public IActionResult Report()
        ViewBag.Message = "Your reports page.";
        return View();

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 for easiness. You can find sample reports in {Telerik Reporting installation path}\Report Designer\Examples if you have an existing installation of the Telerik Reporting product. 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 view that contains the HTML5 Report Viewer.

    Open the Views folder, right-click on the Home folder and select Add > New Item > Installed > ASP.NET. Then add a new MVC View Page named Report. We want the Report action in the HomeController to target this view.

  3. Add the HTML5 Report Viewer. For a detailed explanation, check the HTML5 Report Viewer Manual Setup help article in the online documentation. 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.

    Important note Important

    Whenever you need to route a relative path you will have to use Url.Content helper, like this:


    instead of simply pasting the path.

    The complete Report view (Report.cshtml) should look like this:

        Layout = null;
    <!DOCTYPE html>
        <title>APS.NET Core HTML5 Report Viewer Demo</title>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <script src="" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
        <link href="" rel="stylesheet" />
        <link href="" rel="stylesheet" />
        <!-- the required Kendo subset is located in {Telerik Reporting installation path}\Html5\ReportViewer\js -->  
        <script src="/ReportViewer/js/telerikReportViewer.kendo-x.x.x.x.min.js"></script>
        <!--If Kendo CDN is prefered here are the required Kendo widgets and bundles
        The minimum required widgets:
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        Widgets bundle:
        kendo.all.min.js can be used instead of the above widget list
        <script src="/api/reports/resources/js/telerikReportViewer-x.x.x.x.min.js"></script>
            #reportViewer1 {
                position: absolute;
                left: 5px;
                right: 5px;
                top: 5px;
                bottom: 5px;
                overflow: hidden;
                font-family: Verdana, Arial;
        <div id="reportViewer1">
        <script type="text/javascript">
            $(document).ready(function () {
                        // The URL of the service which will serve reports.
                        // The URL corresponds to the name of the controller class (ReportsController).
                        // For more information on how to configure the service please check
                        serviceUrl: '@Url.Content("~/api/reports/")',
                        // The URL for the report viewer template. The template can be edited -
                        // new functionalities can be added and unneeded ones can be removed.
                        // For more information please check
                        @*templateUrl: '@Url.Content("~/ReportViewer/templates/telerikReportViewerTemplate-FA.html")',*@
                        //ReportSource - report description
                        reportSource: {
                            // The report can be set to a report file name
                            // or CLR type name (report class definition).
                            report: "Barcodes Report.trdp",
                            // Parameters name value dictionary
                            parameters: {}
                        // Specifies whether the viewer is in interactive or print preview mode.
                        // PRINT_PREVIEW - Displays the paginated report as if it is printed on paper. Interactivity is not enabled.
                        // INTERACTIVE - Displays the report in its original width and height without paging. Additionally interactivity is enabled.
                        viewMode: telerikReportViewer.ViewModes.INTERACTIVE,
                        // Sets the scale mode of the viewer.
                        // Three modes exist currently:
                        // FIT_PAGE - The whole report will fit on the page (will zoom in or out), regardless of its width and height.
                        // FIT_PAGE_WIDTH - The report will be zoomed in or out so that the width of the screen and the width of the report match.
                        // SPECIFIC - Uses the scale to zoom in and out the report.
                        scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,
                        // Zoom in and out the report using the scale
                        // 1.0 is equal to 100%, i.e. the original size of the report
                        scale: 1.0,
    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. To add a link to the Report view in the Home page navigation open Views\Shared\_Layout.cshtml page and add:

    <li><a asp-area="" asp-controller="Home" asp-action="Report">Report</a></li>

    list item to the navigation. It should become like this:

    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
    <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
    <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
    <li><a asp-area="" asp-controller="Home" asp-action="Report">Report</a></li>

Connection Strings and Engine Configuration

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

Finally, run the project and navigate to the Report view to see the report.