Reporting — New Native Report Viewer for Blazor Server (Available in v21.1)

As you may already know, we recently released a native Report Viewer component for the Blazor Server platform. Powered by our core reporting engine, our new Blazor Report Viewer has no JavaScript dependencies and utilizes components from our own Blazor product line. It is based on the Blazor Server hosting model and allows you to use C# code to apply customization options to the Viewer itself. This post summarizes some of the capabilities available to you in this release.

Blazor Report Viewer: Key Benefits

Our Blazor Report Viewer component ships with the following key Blazor-related technologies/capabilities:

• Pure C# implementation: You don’t have to concern yourself with JavaScript when customizing component behavior and associated user experiences.
• Improved performance: Native implementation reduces load time and increases page navigation speed when compared to JavaScript wrapper based reporting tools.
• UI Consistency: Our Blazor Report Viewer supports all DevExpress Blazor themes.
• Seamless four-step integration into existing Blazor apps (see below).

Blazor Report Viewer: A Brief Overview

The first release of our Blazor Report Viewer includes:

• Toolbar support
  • Page Navigation
  • Editing Fields Toggle
  • Zoom
  • Printing
  • Exporting
  • Document Creation Progress Indicator
• Parameters Panel
• Document Editing

If you have yet to explore our online Blazor Reporting demos, here’s a screenshot of the DevExpress Report Viewer in action:

In our next major update (v21.2), we will extend the capabilities of our Blazor Report Viewer with the following features (and deliver feature parity with our HTML5 Document Viewer):

• Export Options Panel
• Search Panel
• Document Map Panel
• Ability to resize panels
• MultiPage View Mode

How To Get Started

If you use the DevExpress Blazor project template, it will take four simple steps to add our Blazor Report Viewer to your page:

1. Install the DevExpress.Blazor.Reporting.Viewer NuGet package.
2. Add a few lines of code to the Startup.cs file to register the appropriate DevExpress components.
3. Add links to the DevExpress Blazor stylesheets to the page.
4. Add the <DxReportViewer>…</DxReportViewer> markup.

Razor page code is as follows:

<DxReportViewer Report="@Report" RootCssClasses="w-100" @ref="Viewer"></DxReportViewer>

And of course, you’ll need to create a report (an XtraReport or CachedReportSource instance) and assign it to the Report property.

For more information in this regard, please refer to the following help topic: Create a Blazor Report Viewer (Native) Application

Customization

To help modify the Viewer’s appearance and behavior – and to integrate the component within your Blazor application – our Report Viewer ships with a range of customization options. The main API entry point is the DxReportViewer class.

Customize the Toolbar

You can handle the OnCustomizeToolbar event to hide unnecessary/unwanted toolbar items. For instance, the following code hides all export formats except PDF:

@using DevExpress.Blazor.Reporting
@using DevExpress.Blazor.Reporting.Models
// ...
<DxReportViewer @ref="reportViewer"
	OnCustomizeToolbar="OnCustomizeToolbar"
	Report="report"
	RootCssClasses="w-100 h-100"/>
@code {
// ...
	void OnCustomizeToolbar(ToolbarModel toolbarModel) {
		var exportItem = toolbarModel.AllItems
			.Where(item => item.Id == ToolbarItemId.ExportTo).FirstOrDefault();
		exportItem.Items = exportItem.Items
			.Where(format =>
				((ExportFormatItem)format).Format ==
					DevExpress.XtraPrinting.ExportFormat.Pdf).ToList();
	}
}

The OnCustomizeToolbar event also allows you to add a custom toolbar item as needs dictate:

// ...
void OnCustomizeToolbar(ToolbarModel toolbarModel) {
	toolbarModel.AllItems.Add(new ToolbarItem()
		{
			IconCssClass = "oi oi-sun",
			Text = "Sunny",
			AdaptiveText = "Sunny",
			AdaptivePriority = 1,
			Click = async (args) =>
				{
					await YourCustomTaskAsync()
				}
		});
}

Apply Report Parameters

The ParametersModel property allows you to modify report parameters in code and submit them to re-create the document. The following code generates a document with a specific OrderIdParameter:

	var orderParameter = reportViewer.ParametersModel.VisibleItems
		.Where(param => param.Name == "OrderIdParameter").FirstOrDefault();
	orderParameter.Value = 11077;
	reportViewer.ParametersModel.OnSubmitParameters();

You can handle the OnCustomizeParameters event to customize the parameter editor itself. The folllowing code specifies a custom editor for the DateParameter parameter:

// ...
protected ParameterModel parameterModel;
protected DateTime parameterEditorValue
{
	get { return (DateTime)parameterModel.Value; }
	set { parameterModel.Value = value; }
}

void OnCustomizeParameters(ParametersModel parameters)
{
	parameterModel = parameters.VisibleItems
		.Where(param => param.Name == "DateParameter").FirstOrDefault();
	parameterModel.ValueTemplate =
		@<DxDateEdit @bind-Date=parameterEditorValue DisplayFormat="D" Format="d"/>;
}

Localize the Component

You can use standard Blazor localization methods to localize the component’s user interface. Install the DevExpress.Blazor.xx and DevExpress.Blazor.Reporting.Viewer.xx NuGet packages with localized resources to proceed. For more information, review please review our Localization help topic.

Examples

We published customization examples in the following GitHub repositories to help you hit the ground running:

Report Viewer for Blazor - Customization API

This project demonstrates how to customize the Report Viewer component in the following manner:

• Customize commands in the Toolbar
• Customize parameter editors

Report Viewer for Blazor - Customize Export

This project demonstrates how to customize the export actions of the Report Viewer component in the following manner:

• Customize export options
• Use token-based authentication
• Manage exported documents

Before You Start Coding

We know that many of you want us to deliver a WebAssembly compatible reporting engine. To help us frame our long-term vision, please do tell us your development strategy in this regard. Do you need to incorporate DevExpress Reports in pure Blazor WebAssembly apps or with an ASP.NET core backend? If you have specific requirements (data type/data volume) or simply cannot use our Blazor Server Report Viewer, please submit a support ticket on the DevExpress Support Center. We'll be happy to follow-up.

Free DevExpress Products - Get Your Copy Today