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

Prerequisites

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

  2. Add the required NuGet Packages:

    • Telerik.Reporting

    • Telerik.WebReportDesigner.Services

These dependencies are automatically resolved when using NuGet packages. Otherwise they need to be added manually to the project. For further information, visit How to: Add the Telerik private NuGet feed to Visual Studio article.

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 ConfigurationService in the Startup.cs file

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

    C#
    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)
                            .Build();
    
            this.Configuration = config;
        }
    
        public IConfiguration Configuration { get; private set; }
    
        public IWebHostEnvironment Environment { get; private set; }
    }
  2. Add the required services in the ConfigureServices method

    C#
    // 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<IReportResolver>(sp =>
            new ReportTypeResolver().AddFallbackResolver(new ReportFileResolver(
                Path.Combine(sp.GetRequiredService<ConfigurationService>().Environment.WebRootPath, "Reports"))));
        services.TryAddScoped<IReportServiceConfiguration>(sp =>
            new ReportServiceConfiguration
            {
                ReportingEngineConfiguration = sp.GetRequiredService<ConfigurationService>().Configuration,
                HostAppId = "Html5DemoAppCore",
                Storage = new FileStorage(),
                ReportResolver = sp.GetRequiredService<IReportResolver>()
            });
    
        // 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:

  1. As the Web Report Designer preview the reports in an HTML5 Report Viewer, it relies on Reporting REST Web Api Service. .NET Core applications provide new way of storing the configuration. The Strings and Engine Configuration section describes how to activate JSON file configuration and how to add a singleton service to the container services. In this case to the web report designer REST service.

  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:

    C#
    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; 
    
        [Route("api/reportdesigner")] 
        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.

    The complete report viewer page should look like this:

    HTML
    <!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <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="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap" rel="stylesheet"> 
    </head> 
      <body> 
        <div id="webReportDesigner"> 
            loading... 
        </div> 
    
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
        <script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script> 
        <script src="api/reportdesigner/resources/js/telerikReportViewer"></script> 
        <script src="api/reportdesigner/designerresources/js/webReportDesigner"></script> 
    
        <script type="text/javascript"> 
            $(document).ready(function () { 
                $("#webReportDesigner").telerik_WebReportDesigner({ 
                    persistSession: false, 
                    toolboxArea: { 
                        layout: "list" 
                    }, 
                    serviceUrl: "api/reportdesigner/", 
                    report: "Product Catalog.trdp" 
                }).data("telerik_WebDesigner"); 
            }); 
        </script> 
      </body> 
    </html>
  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.

Examples

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?