Telerik blogs
Embedding Beautiful Reporting into Your Applications_1200x303

It's easy to display powerful reports in your Blazor apps using Telerik Reporting and Report Viewer. Learn how in this quick tutorial.

The architecture of the Telerik Reporting solution makes it easy to add reports either to your client-side or server-side Blazor application. Since the Telerik Report Viewer retrieves reports by issuing Ajax calls to the Telerik Reporting REST Service, it really doesn’t matter to your Blazor client whether you’re running in client-side or server-side Blazor (though you do need Blazor 3.1 or later).

Some technical background (feel free to skip the next paragraph): To set up this project, I first installed Telerik Reporting from my Telerik account. I then created my project using version 2.12.0 of the Telerik controls, Visual Studio 2019 preview (version 16.6.0 Preview 6.0), and ASP.NET Core 16.6.934/Razor Language Tools 16.1.0/WebAssembly 3.2.0. I created two applications using Telerik C# Blazor Application template: one with the Blank Client App template and one with the Blank Server App template. I also downloaded the AdventureWorks database to use with my report.

Grab the eBook: A Quick Guide to Expert .NET Reporting Tools 

Setting up the Telerik Reporting Project

Before using Report Viewer in a component, you’ll have to set up a project to act as a host for the REST Service that will render the reports (that can take as much as five minutes). For this post, I’m going to assume that the project displaying reports is also the REST Service project (that way I don’t have to configure the projects for cross origin request issues).

If you’re working with server-side Blazor, you have only one project in your solution, so you’ll make all of your changes to that one project. However, if you’re working with client-side Blazor (current official name: Blazor WebAssembly), you’ll have three projects in your solution. For client-side Blazor, therefore, you’ll want to make sure that you make the Telerik Reporting changes (the changes in this section) to the project with your server-side controllers (the project whose name ends with “.Server”).

You’ll need a report to display, of course. I created my own report using the Telerik Report Designer R2 2020, running against the AdventureWorks2017 database. While creating the report, I took advantage of the opportunity to embed the connection string for my report in the report itself. I saved my report in a file called ContactList.trdp. Once you have a report, you need to add it to your server-side project: Create a folder in your server project called “Reports” and copy your report into it (in my case, that’s my ContractList.trdp file).

To host the Reporting REST Service in the server-side project, add to your server project the NuGet package Telerik.Reporting.Services.AspNetCore from the Telerik NuGet site at https://nuget.telerik.com/nuget. You’ll also need to add the NuGet Microsoft.AspNet.Core.Mvc.NewtonsoftJson package, this time from NuGet.org.

With those packages added, you need to make some changes to your server-side project’s Startup class. In the ConfigureServices method, find the services.AddRazorPages line and change it to this:

services.AddRazorPages().AddNewtonsoftJson();

Still in the ConfigureServices method, add this for a minimal Reporting REST Service implementation:

services.TryAddSingleton<IReportServiceConfiguration>(sp => new ReportServiceConfiguration
            {
                Storage = new FileStorage(),
                ReportSourceResolver = new UriReportSourceResolver(
                        System.IO.Path.Combine(sp.GetService<IWebHostEnvironment>().ContentRootPath, "Reports"))
            });

The next server-side change is to create the actual Reporting controller class. Just add a new class to your server project called ReportsController, and put this in it:

[Route("api/reports")]
public class ReportsController : ReportsControllerBase
{
   public ReportsController(IReportServiceConfiguration reportServiceConfiguration)
            : base(reportServiceConfiguration)
        {
        }        
}

For a client-side Blazor project (if you used the same template as I did to create your project and embedded the connection string to your data source in your report, also as I did), that’s all of the changes required in your server code. If you’re working on a server-side Blazor project, you’ll also need to add this line to the ConfigureServices method in your Startup class:

services.AddControllers();

From here on, adding more reports to your Reporting web application just consists of dropping the report into your server project’s Reports folder.

In the Telerik documentation there is a complete reference to setting up a Reporting REST Service instance that gives you more options, including how to store your report’s connection string in your project’s appsettings.json file.

Using the Report Viewer

With your Reporting REST service set up, you start configuring your client-side pages to display reports with ReportViewer. If you’re working with client-side Blazor, you’ll need to switch to the project with your Razor pages (the project whose name ends with “.Client”). If you’re working with server-side Blazor, then you’ll continue to work in the same project.

Once you’re sure you’re working with the right project, your first step is to add another NuGet page to it: Telerik.ReportViewer.Blazor (also from https://nuget.telerik.com/nuget).

Now you need to add the JavaScript and CSS support ReportViewer needs to your Blazor application’s host page. If you’re working in client-side Blazor, then you’ll add these to the index.html file in the wwwroot folder; if you’re working in server-side Blazor, then it’s the _Host.cshtml file in the Pages folder that you want. A minimal set of tags, added to the page’s element, would look like this (again, the Telerik documentation has a complete reference):

   <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
   <script src="/api/reports/resources/js/telerikReportViewer"></script>
   <link href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css" rel="stylesheet" />
   <link href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.blueopal.min.css" rel="stylesheet" />
</head>

If you’ve already added the jQuery script element to this page, you’ll need to delete it (the jQuery script element has to precede the telerikReportViewer script element).

In the same file, just before the closing tag, add this element:

   <script src="_content/telerik.reportviewer.blazor/interop.js" defer></script>
</body>

Displaying the Report

You’re now ready to add the ReportViewer component to whatever Blazor pages in your project will be displaying reports. I just changed one page: The Index.razor page that’s included in the project template. A minimal implementation looks like the following—just make sure that you change the name of the report to the name of your report file. Since my report was in a file named ContactList.trdp, that’s what I put in:

<style>
    #rv1 {
        position: relative;
        width: 1200px;
        height: 600px;
    }
</style>

<ReportViewer 
ViewerId="rv1"
              ServiceUrl="/api/reports"
              ReportSource="@(new ReportSourceOptions()
                              {
                                  Report = "ContactList.trdp"
                              })"
              ScaleMode="@ScaleMode.FitWidth" />

You’ll also need this directive at the top of your Razor file:

@using Telerik.ReportViewer.Blazor

You should now be able to press f5 (or ctrl + f5 in a server-side Blazor project) to see your report.

Exploiting ReportViewer

Once you’ve got your report on the screen you can start exploiting the power of ReportViewer. Without doing anything more, your user will be able to use ReportViewer’s menu to page through the report, download it in a variety of formats (PDF, CSV, RTF, TIFF), and print it. With some additional configuration, you can support users sending the report as email or providing parameters to filter the report.

By default, users can scroll through the report continuously (new pages are displayed as the user scrolls to the bottom of a page). If you want users to always page through the report, you can add the Page attribute to your ReportView component and set it to PageMode.SinglePage, like this:

    ViewerId="rv1"
    PageMode="@PageMode.SinglePage"

Your user can also zoom in and out on your report using the magnifying glass icons on ReportViewer’s menu bar. However, you can control the initial display’s zoom level with the ReportViewer’s ScaleMode attribute. Setting ScaleMode to SaleMode.FitPage will compact an entire page of the report into a single browser window, for example. Alternatively, you can set ScaleMode to ScaleMode.Specific and add the Scale attribute to specify the zoom level on the report’s initial display, like this:

  ScaleMode="@ScaleMode.Specific"
  Scale="1.2" 
/>

The obvious step is probably to let your users pick the report they want. That’s easy to do: First, add a dropdown list of reports to your page (tied to a change method) and assign the ReportViewer to a field in your code with an @ref attribute:

    <select  @onchange="(args) => changeReport(args)">
        <option value="ContactList.trdp">Contact List</option>
        <option value="VendorsList.trdp">Vendor List</option>
    </select>

    <ReportViewer ViewerId="rv1"
                                @ref="theReport"
           …

Now, adding a field declaration and three lines of code in your change method will let your user select the report they want:

ReportViewer theReport;

void changeReport(ChangeEventArgs e)
{
   ReportSourceOptions rso = new ReportSourceOptions();
   rso.Report = e.Value.ToString();
   theReport.SetReportSourceAsync(rso);
}

You’re ready to deliver beautiful reports directly into your Blazor application.

Tried Telerik DevCraft?

You can choose Telerik Reporting and Telerik Report Server as individual products or enjoy them as part of the great Telerik DevCraft bundles.

Try Telerik DevCraft

Telerik DevCraft is the finest software developer tools collection across .NET and JavaScript technologies, which includes modern, feature-rich and professionally designed UI components for web, desktop and mobile applications, reporting and report management solutions, document processing libraries, automated testing and mocking tools from the Telerik and Kendo UI suites. DevCraft will arm you with everything you need to deliver outstanding applications in less time and with less effort. With the backing of our legendary support team, which consists of the developers who build the products, and a ton of resources and trainings you can rest assured that you have a stable partner to rely on for your everyday challenges along your software development journey.


Peter Vogel
About the Author

Peter Vogel

Peter Vogel is a system architect and principal in PH&V Information Services. PH&V provides full-stack consulting from UX design through object modeling to database design. Peter also writes courses and teaches for Learning Tree International.

Related Posts

Comments

Comments are disabled in preview mode.