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

Prerequisites

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

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

    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. Note that the Web Report Designer container has a minimum width of 1200px.

    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/2020.1.114/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?