Progress® Telerik® Reporting R1 2021

New to Telerik Reporting? Download free 30-day trial

How to setup the WebReportDesigner in .NET Core 2.1+ application

This article shows how to integrate our Web Report Desginer in а .NET Core application.

The quickest way to add the web report designer to a web project is with the Telerik Web Report Designer item template in Visual Studio. The item template is compatible with .NET Core 3.1 projects. The item template adds a page with the Web Report Designer and, if needed, enables the Web Report Designer REST Service. To start the item template wizard, in Visual Studio Solution Explorer, select the target project. On the Project menu, click Add -> New Item. In the Add New Item search box enter "Telerik Web Report Designer" and select the item template which corresponds to your web project type.

For full control, instead of using the item template, you can manually configure the REST service and add the web report designer as elaborated in the rest of this article.


The following list describes the prerequisites for this guide:

  1. Create a sample ASP.NET Core 2.1+ Project.

  2. Add the required NuGet Packages:

    • Telerik.Reporting

    • Telerik.WebReportDesigner.Services

When you use NuGet packages, the dependencies will be automatically resolved . Otherwise, you need to add them manually to the project. For more information, see How to add the Telerik private NuGet feed to Visual Studio.

If you need to enable users to export reports in Office OpenXML document formats (XLSX, DOCX and PPTX), you must install the DocumentFormat.OpenXML and the Telerik.Reporting.OpenXmlRendering NuGet packages. For more information about the required package versions, see Deploying Open XML.

Setting up the ConfigurationService in the Startup.cs file

  1. Add a new ConfigurationService class as a separate file or in the Startup.cs file

    public class ConfigurationService
        public ConfigurationService(IWebHostEnvironment environment)
            this.Environment = environment;
            var configFileName = System.IO.Path.Combine(environment.ContentRootPath, "appsettings.json");
            var config = new ConfigurationBuilder()
                            .AddJsonFile(configFileName, true)
            this.Configuration = config;
        public IConfiguration Configuration { get; private set; }
        public IWebHostEnvironment Environment { get; private set; }
  2. Add the required services in the ConfigureServices method

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
        // Configure dependencies for ReportServiceConfiguration.
        services.TryAddSingleton<ConfigurationService>(sp => new ConfigurationService(sp.GetService<IWebHostEnvironment>()));
        services.TryAddScoped<IReportSourceResolver>(sp =>
            new TypeReportSourceResolver().AddFallbackResolver(new UriReportSourceResolver(
                Path.Combine(sp.GetRequiredService<ConfigurationService>().Environment.WebRootPath, "Reports"))));
        services.TryAddScoped<IReportServiceConfiguration>(sp =>
            new ReportServiceConfiguration
                ReportingEngineConfiguration = sp.GetRequiredService<ConfigurationService>().Configuration,
                HostAppId = "Html5DemoAppCore",
                Storage = new FileStorage(),
                ReportSourceResolver = sp.GetRequiredService<IReportSourceResolver>()
        // Configure dependencies for ReportDesignerServiceConfiguration.  
        services.TryAddScoped<IDefinitionStorage>(sp => new FileDefinitionStorage(Path.Combine(sp.GetRequiredService<ConfigurationService>().Environment.WebRootPath, "Reports")));
        services.TryAddScoped<IReportDesignerServiceConfiguration>(sp => new ReportDesignerServiceConfiguration { DefinitionStorage = sp.GetRequiredService<IDefinitionStorage>() });

Setting up the Report Designer REST service:

The REST service works as a backend and is responsible for storage operations like creating, opening, or saving report definitions. The following steps describe how to configure it:

  1. Make sure that the appSettings.json file is available in your project and add the required configuration settings in the file, for example the ConnectionStrings.

    Telerik Reporting settings are defined in the application's configuration file. In .NET Core applications, this is the key-value JSON-based file named appSettings.json.

  2. Implement a Report Designer controller. Right-click on the Controllers folder and add a new item: Add > New item... > Web API Controller Class item. Name it ReportDesignerController. This will be our Telerik Web Report Designer REST service in the project.

  3. Inherit the ReportDesignerControllerBase type and setup the ReportServiceConfiguration instance. Notice that there is another configuration instance named ReportDesignerServiceConfiguration, which will initialize the definition storage. This is the class responsible for opening, saving, etc. the report definitions. This is how a basic implementation of the controller should look like:

    namespace CSharp.AspNetCoreDemo.Controllers
        using Microsoft.AspNetCore.Mvc; 
        using System.IO; 
        using Telerik.Reporting.Cache.File; 
        using Telerik.Reporting.Services; 
        using Telerik.Reporting.Services.AspNetCore; 
        using Telerik.WebReportDesigner.Services; 
        using Telerik.WebReportDesigner.Services.Controllers; 
        public class ReportDesignerController : ReportDesignerControllerBase 
            public ReportDesignerController(IReportDesignerServiceConfiguration reportDesignerServiceConfiguration, IReportServiceConfiguration reportServiceConfiguration)
                : base(reportDesignerServiceConfiguration, reportServiceConfiguration)

Adding the Web Report Designer:

  1. Add a new HTML Page for the Web Report Designer by right-clicking on wwwroot and Add > New Item... > HTML Page. Name the file index.html. Add the required references to load the font, jQuery, Telerik Kendo UI libraries, telerikReportViewer and webReportDesigner scripts listed in the example below. Finally, add the initialization of the telerik_WebReportDesigner widget. Note that the Web Report Designer container has a minimum width of 1200px.

    The complete report viewer page should look like this:

    <!DOCTYPE html> 
    <html xmlns=""> 
        <title>Telerik Web Report Designer Demo</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
        <link href=",500&display=swap" rel="stylesheet"> 
        <div id="webReportDesigner"> 
        <script src=""></script> 
        <script src=""></script> 
        <script src="api/reportdesigner/resources/js/telerikReportViewer"></script> 
        <script src="api/reportdesigner/designerresources/js/webReportDesigner"></script> 
        <script type="text/javascript"> 
            $(document).ready(function () { 
                    persistSession: false, 
                    toolboxArea: { 
                        layout: "list" 
                    serviceUrl: "api/reportdesigner/", 
                    report: "Product Catalog.trdp" 
  2. To setup the index.html as startup page check Make index.html as startup file in ASP.NET Core. Then, change the launchUrl to index.html in launchSettings.json.

  3. Finally, run the project to preview the web designer.


Find the complete example setup of the Web Report Designer in the AspNetCoreDemo located in Telerik Reporting installation folder. For example, %PROGRAMFILES(x86)%\Progress\Telerik Reporting {VERSION}\Examples\CSharp\AspNetCoreDemo . The Web Report Designer’s page is in wwwroot folder. To setup the page to be a startup page, change the launchUrl to webReportDesigner.html in launchSettings.json.

In this article
Not finding the help you need?