Telerik Reporting Modern UI: Report Viewer Demo

This is the third and final post in a series detailing how to style application across platforms, writing once and delivering everywhere. This post is about applying our custom theme to Report Viewers in our web and desktop applications.

Series Outline

This is the third and final post in a series detailing how to style application across platforms, writing once and delivering everywhere. This post is about applying our custom theme to report viewers in our web and desktop applications.

1. Sleek and Customizable UI for Any Design System and Technology
2. Telerik and Kendo UI Theme Customization: Web and Desktop Demo
3. Telerik Reporting Modern UI: Report Viewer Demo (this post)

Introduction

Up to this point in the series, we have conceptually reviewed the importance of sleek and customizable themes, created a custom theme, and used this theme in various web and desktop applications. However, I wager that an application is never complete without a reporting feature. This is where Telerik Reporting comes in handy.

Reports in Telerik Reporting can be designed and styled in an infinite number of ways. We will leave how to do that for a more dedicated article. In this case, we want to understand how to add a custom-styled reporting component that enables viewing reports in each of our applications. To do this, we’ll need to understand Report Viewers. Let us review Report Viewers next.

Report Viewers Overview

Report Viewers are UI components that are used to display reports in applications. We deliver a plethora of report viewers for the web and desktop. The web report viewers are built on the base HTML5 viewer. The desktop report viewers are built natively into the desktop application.

Additionally, our Report Viewer applications in the demo will require the use of the Reporting REST Service. This is because Report Viewers are clients for displaying the reports and the Reporting REST Service is a service for processing and rendering the report. Report Viewers cannot render a report without the REST Service. This means we will also need to add the Reporting REST Service to our Blazor Application to work with our client applications. As a result, we will make a slight detour and add this to our solution next.

Creating the Reporting REST Service

To get started, I am just going to copy over my end result from the Post 02 Source Code Repository to a Post 03 folder. Next, we’ll start with a basic ASP.NET Core WebApi project (fig. 01).

Figure 01: Create Empty ASP.NET Core WebApi Project

Next, there are three general steps to create the Reporting REST Service in ASP.NET Core 5.0. These are Add NuGet Packages, Update Startup.cs Class and Implement the ReportsController. For more detailed steps, see How to Host Reports Service in ASP.NET Core in .NET 5. Let us review the general steps below.

Add NuGet Packages

We will add the Telerik.Reporting, Telerik.Reporting.OpenXmlRendering, Telerik.Reporting.WebServiceDataSource, Newtonsoft.Json and the DocumentFormat.OpenXmL NuGet packages (fig. 02).

It is important to note that not all the above packages are required for the Reporting REST Service but including all will provide the most capabilities. For example, the WebServiceDataSource is only required if reports will use a WebServiceDataSource and the OpenXML packages are only required if rendering reports in Microsoft’s OpenXML Format (DOCX, PPTX, XLSX).

Figure 02: Add NuGet Packages

Update the Startup.cs Class

We are using clients separated by domains so we will need to use CORS in this scenario. Additionally, we’ll make the necessary changes to add Newtonsoft JSON Serialization and configure the Reporting REST Service in the ConfigureService Method (code 01). 

Code Snippet 01: Startup.cs ConfigureServices Method

In the configure method we need to use CORS and ensure the MapControllers is added to the EndPoints (code 02).

Code Snippet 02: Startup.cs Configure Method

Implement the ReportsController

In the WebApi project we can use Visual Studio Scaffolding to add the API controller. Select the empty API Controller and name it ReportsController (fig. 03).

Figure 03: Add Empty ReportsController

After the ReportsController has been scaffolded, inherit the ReportsControllerBase and implement the Base constructor (code 03).

Code Snippet 03: ReportsController.cs

Finally, we can run the API Project. A good way to test if our REST Service is working is by navigating to api/reports/formats. This will produce a JSON array of the available report formats (code 04).

Code Snippet 04: Available Report Formats

With the Reporting REST Service now implemented, we can deliver our reports remotely to our clients. In the remainder of the post, I will be following the same order from Post 02. We’ll continue with the Angular Report Viewer, the Blazor Report Viewer and finish with the WPF Report Viewer. The overall goal of this post is to review how our custom client theme works in the Telerik Reporting Report Viewers, walk through adding a Report Viewer to each client application and use it to display reports.

Custom Theming for Web Report Viewers

The real benefit here is the custom styling that has been added to our web client applications will work without any additional steps. This illustrates the power of custom styling and theming in Telerik and Kendo UI. We can just add the Report Viewers and reap the benefits of our previous efforts.

Ultimately, this works because the web-based Report Viewers are all built around the same underlying HTML5/JavaScript/CSS implementation which also uses the Kendo UI styles out of the box. Let us review creating the Angular Report Viewer next.

Creating the Angular Report Viewer

Creating the Report Viewer in an Angular application is as simple as adding the required resources, preparing the App Module imports and declarations, and creating a report viewer component. For the full details of this, refer to our How To Angular Report Viewer with Angular CLI article.

Add jQuery and Telerik Angular Report Viewer

To do this, we can use npm install jQuery @progress/telerik-angular-report-viewer --save from the command line. Additionally, we’ll need to update the Angular build scripts declaration to include the jQuery distribution (fig. 04).

Figure 04: Add jQuery to Angular Build

Create the Reports Component

Here we can use the Angular scaffolding to add our new component as well. We can run ng generate component reports from the src/app/components folder.

Add Imports and Declarations to AppModule

To add the Angular Report Viewer to our project, we need to import the TelerikReportingModule and declare the newly created ReportsComponent within the AppModule. This should also include a new route as we’re going to need to navigate to the component (code 05). Note lines 20, 21, 27, 38 and 50 in the following code snippet.

Code Snippet 05: Angular Grid app.module.ts

Create the Angular Report Viewer Component

At last, we can create our Angular Report Viewer. We need to make sure we reference our new Reporting REST Service in the serviceUrl component property (code 06 & code 07).

Angular Report Viewer Markup

Code Snippet 06: AngularGrid reports.component.html

Angular Report Viewer Component Code

Code Snippet 07: Angular Grid reports.component.ts

As a bonus, I used a dropdown to select and change the Report Source of the Angular Report Viewer component. I also added a route to the Reporting REST Service project that will produce a JSON list of the available files. However, instead of creating a Service in the Angular project, I just hard-coded this in the src/app/common/files.ts export.

The output of the Angular Report Viewer follows our material theme and elements can also be seen from the dropdown component as well (fig. 05) .

Figure 05: Angular Report Viewer Animation

This concludes creating the Angular Report Viewer. We have reviewed how our existing custom theme is applied within the Angular Report Viewer and walked through the implementation. Next, we will review the Blazor Report Viewer.

Creating the Blazor Report Viewer

In the R3 2021 Telerik Reporting Release, we added the Blazor Report Viewer Visual Studio Item Template which will create the Report Viewer for us. However, for this project we need to do this manually to illustrate the process. Creating the Blazor Report Viewer is like creating the Angular Report Viewer. Add the dependencies, create the component, create the Report Viewer and take advantage of our previous efforts. Since we’re using the Reporting REST Service, we only need to update the Wasm Client. Let us begin.

Add the Telerik.ReportViewer.Blazor Reference

We will start by adding the Telerik.ReportViewer.Blazor NuGet package which is available through the Telerik NuGet Feed (fig. 06). For reference, this can be set up within Visual Studio or through the command-line interface as shown in the Telerik Private NuGet Feed documentation.

Figure 06: Add the Telerik.ReportViewer.Blazor Package

Add Dependencies to Index.html

There are three dependencies that need to load in the index.html file. These are the interop.js, jQuery and the Telerik Report Viewer scripts (code 08). Note lines 17, 18 and 31 in the below code snippet.

Code Snippet 08: Blazor Wasm Grid index.html

Create a Reports Razor Page

Next, we can add a new Reports Razor Component through visual studio (fig. 07).

Figure 07: Add New Razor Component in Visual Studio

Create the Blazor Report Viewer Component

Finally, we can add the Blazor Report Viewer usings, styles, markup and code blocks.

Blazor Report Viewer Markup

Because we’re using the Reporting REST Service, we need to inject the HttpClient (code 09). This is a common pattern with Wasm.

Code Snippet 09: Blazor Wasm Grid Markup

Blazor Report Viewer Code Block

We have also implemented selecting the Report Source from a dropdown as well (code 10).

Code Snippet 10: Blazor Wasm Grid Code Block

Below is the output of the Blazor Report Viewer and how it works with our custom styling (fig. 08).

Figure 08: Blazor Report Viewer Animation

This wraps up adding the Blazor Report Viewer to our sample project. In this section, we walked through setting up the Blazor Report Viewer and we didn’t have to make any changes to our styling. Everything worked right out of the box as expected.

Overall, theming across our web frameworks and web report viewers is quite easy. This is by design because they use the same styles and resources. We were able to walk through setting up the report viewers in Angular and Blazor. However, these same concepts can be applied to ASP.NET MVC, ASP.NET AJAX, a plain HTML5/CSS/JS application, React or Vue. In the next section, we will do the same for our desktop application.

Custom Theming for Desktop Report Viewers

Like when we created our custom themes for our WPF desktop application, adding the WPF Report Viewer is more involved. However, we still get to reap the benefits of our custom styles within the Report Viewer like the Web Report Viewers.

The reason for this is because we used Implicit Styling. For the WPF Report Viewer, we will also use Implicit Styling but with the Reporting-provided Theme references. Let’s walk through creating the WPF Report Viewer next.

Creating the WPF Report Viewer

As with the web applications, the general process is similar. We will add references, update the app.xaml and then create the markup and code-behind. For reference, the entire process is detailed in How to Add a Report Viewer to a WPF .NET Core Project.

Add Required Assembly References

There are several assemblies that need to be added for the WPF application. Below is an outline of each and they can all be found in the Private Telerik NuGet Feed as before (fig. 09).

• Required References
  • Telerik.Reporting.Services.HttpClient
  • Telerik.ReportViewer.Wpf
  • Telerik.ReportViewer.Wpf.Themes
  • Telerik.Windows.Controls
  • Telerik.Windows.Controls.Input
  • Telerik.Windows.Controls.Navigation
  • Telerik.Windows.Data

Figure 09: WPF Report Viewer Assembly References

Merge Theme Resources in App.xaml

To reuse our custom styling and add the WPF Report Viewer, we need to update the referenced theme resources in the App.xaml (code 11).

We only need to use the Telerik.ReportViewer.Wpf.Themes dictionaries for the control references that are used in the Report Viewer. For example, the Telerik.Windows.Controls.GridView isn’t used by the report viewer and will use the existing theme reference on line 10.

Code Snippet 11: WPF App.xaml File

Add Namespace to the MainWindow Declaration

Since we are adding new references and will use them on our MainWindow, we also need to include the declaration at the top of the page (code 12). We will add Telerik.ReportViewer.Wpf and Telerik.Reporting namespaces to the page on lines 6 and 7.

Code Snippet 12: MainWindow.xaml Declarations

Create the Report Viewer Control

To keep the user experience similar where the end user selects the report from a dropdown, we have used two additional controls—the WPF Tab control and the WPF ComboBox control (code 13 & code 14).

WPF MainWindow.xaml Markup

Code Snippet 13: MainWindow.xaml Markup

WPF MainWindow.xaml.cs Code-Behind

Code Snippet 14: MainWindow.xaml.cs Code-Behind

The output of the new WPF application is below (fig. 10).

Figure 10: WPF Report Viewer Animation

This completes adding the WPF Report Viewer to our WPF Application. We talked about how can use the custom theme and walked through adding the Report Viewer. We found that the overall process is conceptually similar to adding the Report Viewers to our web applications. This is by design and will allow for our users to have some familiarity when using custom styling across products.

Conclusion

In this post, we walked through adding a Report Viewer to our Angular, Blazor and WPF applications. Because theming across products is designed to be simple, we were able to achieve our custom styling right out of the box in each application. This is an important concept behind the Telerik UI and Kendo UI suites. We like to keep everything as simple as possible.

This brings our series for styling across products to a close. I hope the content was enjoyable, and please feel free to comment below or create any issues in the corresponding GitHub repository as well.

Try DevCraft Today

Get started with a Telerik DevCraft Trial today! Our DevCraft tooling is the most powerful collection of Telerik .NET and Kendo UI JavaScript developer tools. It includes modern, feature-rich, professionally designed UI components for web, desktop and mobile applications; embedded reporting and report management solutions; document processing libraries; automated testing and mocking tools.

DevCraft will arm your developers with everything needed to deliver outstanding applications in less time and with less effort. With award-winning technical support delivered by the developers who built the products and a ton of resources and trainings, you can rest assured that you have a stable provider to rely on for your everyday challenges along your software development journey.

Try DevCraft Now