How to set up in Blazor application

The following article guides you how to use the Blazor Web Report Designer in a Blazor web application.

Prerequisites

• Visual Studio 2019, version 16.4 or later

• Existing ASP.NET Core 3.1, .NET 5, or .NET 6 Blazor Server or WebAssembly application

• The designer consumes reports generated and served from a running REST Service. Such can be referenced from another application or it can be hosted locally in the Blazor application as described below.

Adding the Report Designer REST service and configuration

1. Use NuGet package manager to add the Telerik.WebReportDesigner.Services package. This will also resolve other dependencies automatically. For more information, see How to add the Telerik private NuGet feed to Visual Studio.

2. Add required settings in the Startup.cs file.The ConfigureServices method inside the Startup.cs in the project should be modified in order to enable the Web Report Designer REST service. Make sure the application is configured for WebAPI controllers and call the AddNewtonsoftJson to enable the required NewtonsoftJson serialization:

   public void ConfigureServices(IServiceCollection services)
   {
       services.AddControllers();
       services.AddRazorPages()
        .AddNewtonsoftJson();
       services.AddServerSideBlazor();
    ...
   

3. Add the required services in the ConfigureServices method. The sample configuration below uses the Reports folder in the WebRootPath to open and save report definitions. It is required to create the Reports folder manually under wwwroot and optionally add some report definitions inside.

   ...
   services.TryAddSingleton<IReportServiceConfiguration>(sp => new ReportServiceConfiguration
   {
       ReportingEngineConfiguration = sp.GetService<IConfiguration>(),
       HostAppId = "BlazorWebReportDesignerDemo",
       Storage = new FileStorage(),
       ReportSourceResolver = new UriReportSourceResolver(Path.Combine(sp.GetService<IWebHostEnvironment>().WebRootPath, "Reports"))
   });
   services.TryAddSingleton<IReportDesignerServiceConfiguration>(sp => new ReportDesignerServiceConfiguration
   {
       DefinitionStorage = new FileDefinitionStorage(Path.Combine(sp.GetService<IWebHostEnvironment>().WebRootPath, "Reports")),
       SettingsStorage = new FileSettingsStorage(Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData), "Telerik Reporting")),
       ResourceStorage = new ResourceStorage(Path.Combine(sp.GetService<IWebHostEnvironment>().WebRootPath, "Resources"))
   });
   ...
   

4. Make sure the endpoints configuration inside the Configure method of the Startup.cs are configured for API controllers by adding the following line in the lambda expression argument:

   app.UseEndpoints(endpoints =>
   {
       endpoints.MapControllers();
       ...
   });
   

5. If not already present, add this line to the Configure method of the Startup.cs to assure that the application can serve static files:

   app.UseStaticFiles();
   

6. Implement a Report Designer controller. Add a Controllers folder to the application and right-click on it to add a new Web API Controller Class item. Name it ReportDesignerController. This will be the Telerik Web Report Designer REST service in the project.

   using Microsoft.AspNetCore.Mvc;
   using Telerik.Reporting.Services;
   using Telerik.WebReportDesigner.Services;
   using Telerik.WebReportDesigner.Services.Controllers;
   [Route("api/reportdesigner")]
   [ApiController]
   public class ReportDesignerController : ReportDesignerControllerBase
   {
       public ReportDesignerController(IReportDesignerServiceConfiguration reportDesignerServiceConfiguration, IReportServiceConfiguration reportServiceConfiguration)
           : base(reportDesignerServiceConfiguration, reportServiceConfiguration)
       {
       }
   }
   

Adding the Blazor Web Report Designer component

1. Add NuGet package reference to the Telerik.WebReportDesigner.Blazor package hosted on the Progress Telerik proprietary NuGet feed. Make sure you have the needed NuGet feed added to VS setting using the article How to add the Telerik private NuGet feed to Visual Studio.

2. Add JavaScript dependencies to the head element of the Pages/_Host.cshtml (Blazor Server) or wwwroot/index.html (Blazor WebAssembly):

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.all.min.js"></script>
   <script src="/api/reportdesigner/resources/js/telerikReportViewer"></script>
   <script src="/api/reportdesigner/designerresources/js/webReportDesigner/"></script>
   

3. Add Telerik Kendo UI Sass-Based Themes to the head element of the Pages/_Host.cshtml (Blazor Server) or wwwroot/index.html (Blazor WebAssembly). The Razor syntax for a server application differs and you need to escape the @ symbol as @@ :

   <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css" />
   

4. Add the dedicated telerikWebReportDesignerInterop.js dependency at the end of the body element of the Pages/_Host.cshtml (Blazor Server) or wwwroot/index.html (Blazor WebAssembly):

   <script src="_content/telerik.webreportdesigner.blazor/telerikWebReportDesignerInterop.js" defer></script>
   @* Or this one if using the Telerik.WebReportDesigner.Blazor.Trial package *@
   @*<script src="_content/Telerik.WebReportDesigner.Blazor.Trial/telerikWebReportDesignerInterop.js" defer></script>*@
   

5. Use the following snippet to place the designer component in a razor page like Pages/Index.razor.

   @page "/"
   @using Telerik.WebReportDesigner.Blazor
   <style>
       #wrd1 {
           position: relative;
           width: 1300px;
           height: 880px;
           padding-right: 50px;
       }
   </style>
   @* Create the WebReportDesignerWidget *@
   <WebReportDesigner DesignerId="wrd1"
               ServiceUrl="/api/reportdesigner"
               Report="SampleReport.trdp"
               ReportViewerOptions="@(new ReportViewerOptions() {
                   templateUrl = "api/reportdesigner/resources/templates/telerikReportViewerTemplate.html",
                   scaleMode = ScaleMode.Specific,
                   scale = 1.0,
                   pageMode = PageMode.ContinuousScroll,
                   viewMode = ViewMode.Interactive
               })"
               ToolboxArea="new ToolboxAreaOptions() { Layout = ToolboxAreaLayout.List }"
               PropertiesArea="new PropertiesAreaOptions() { Layout = PropertiesAreaLayout.Categorized }" />
   

6. The Report option will instruct the designer to look for SampleReport.trdp inside wwwroot/Reports on first load. You can create this report definition in the folder or omit the Report option above. Finally, run the project.