How to handle Report viewer events in Blazor Web Assembly

This tutorial explains how to handle rendering and export‑related events in the Bold Reports^® Web Report Viewer within a Blazor Web Assembly application. The video demonstrates how developers can hook into the report life cycle to manage rendering flow, handle cancellations, and intercept export actions.

Setup

Add the following code to the BoldReportViewerOptions.cs file. This defines the ReportViewerEvents and CallBacks for linking event names to handler methods.

namespace BlazorReportingTools.Data
{
    public static class ReportViewerEvents
    {
        public const string RenderingBegin  = "renderingBegin";
        public const string ReportExport    = "reportExport";
        public const string ReportCanceled  = "reportCanceled";
    }

    public class BoldReportViewerOptions
    {
        public string ReportName { get; set; } = string.Empty;
        public string ServiceURL { get; set; } = string.Empty;
        public Dictionary<string, string> CallBacks { get; set; } = new();
    }
}

In the Pages folder, add the following code to the index.razor file. This configures the report viewer settings and uses JavaScript interop to allow the viewer to trigger event callbacks within the Blazor page.

@page "/"
@implements IAsyncDisposable
@inject IJSRuntime JSRuntime

<div id="report-viewer"></div>

@code {
    private BoldReportViewerOptions viewerOptions = new();
    private DotNetObjectReference<Index>? dotNetReference;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            viewerOptions.ReportName = "sales-order-detail";
            viewerOptions.ServiceURL = "/api/BoldReportsAPI";
            viewerOptions.CallBacks = new Dictionary<string, string>
            {
                [ReportViewerEvents.RenderingBegin] = nameof(Index.OnRenderingBegin),
                [ReportViewerEvents.ReportExport]   = nameof(Index.OnReportExport),
                [ReportViewerEvents.ReportCanceled] = nameof(Index.OnReportCanceled)
            };

            dotNetReference = DotNetObjectReference.Create(this);
            await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer",
                dotNetReference, "report-viewer", viewerOptions);
        }
    }

    public async ValueTask DisposeAsync()
    {
        dotNetReference?.Dispose();
        await ValueTask.CompletedTask;
    }
}

Interop File

Add the following code in the wwwroot/scripts/boldreports-interop.js file.

window.BoldReports = {
    Events: {
        RenderingBegin:  "renderingBegin",
        ReportExport:    "reportExport",
        ReportCanceled:  "reportCanceled"
    },

    RenderViewer: function (dotNetReference, elementId, viewerOptions) {
        var callbacks = viewerOptions.CallBacks || {};
        var events = window.BoldReports.Events;

        var invoke = function (eventKey, args) {
            if (dotNetReference && callbacks[eventKey]) {
                dotNetReference.invokeMethodAsync(callbacks[eventKey], args);
            }
        };

        $("#" + elementId).boldReportViewer({
            reportPath: viewerOptions.ReportName,
            reportServiceUrl: viewerOptions.ServiceURL,

            // Notifies the Blazor component before report rendering begins.
            renderingBegin: function (args) { invoke(events.RenderingBegin, args); },

            // Notifies the Blazor component when report export starts.
            reportExport: function (args) { invoke(events.ReportExport, args); },

            // Notifies the Blazor component when report processing is canceled.
            reportCanceled: function (args) { invoke(events.ReportCanceled, args); }
        });
    }
};

Event Handlers

Add the following event handler methods in the index.razor file in the Pages folder. The [JSInvokable] attribute allows the interop file to call each method when the viewer fires the corresponding event. The args parameter carries the event details passed from the viewer.

Rendering Begin

Fires before the report rendering process starts. This event can be used to perform pre‑rendering operations such as showing loading indicators or validating conditions.

[JSInvokable]
public Task OnRenderingBegin(string args)
{
    return ShowToastAsync("Report rendering has begun…");
}

Report Export

Fires when the report export process is initiated. This event allows you to intercept or customize export behavior before the file is generated.

[JSInvokable]
public Task OnReportExport(string args)
{
    return ShowToastAsync("Report export has been initiated…");
}

Report Canceled

Triggered when the report rendering or export process is canceled by the user. This event is helpful for handling cleanup or UI reset actions.

[JSInvokable]
public Task OnReportCanceled(string args)
{
    return ShowToastAsync("Report processing was canceled.");
}

Implementation Workflow

Rendering Control

Use rendering life cycle events to track and control report generation flow.

Export Interception

Use export‑related events to validate, log, or customize report exports.

Cancellation Handling

Handle user‑triggered cancellations gracefully using the report Canceled event.

To get more details about Rendering and Export Events in Blazor Web Assembly, you can check this video: