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 index.razor file in the Pages folder. This configures the report viewer options and renders the Bold Reports® Viewer through JavaScript interop.

BoldReportViewerOptions viewerOptions = new BoldReportViewerOptions();

// Used to render the Bold Report Viewer component in Blazor page.

public async Task RenderReportViewer()

{

    viewerOptions.ReportName = "sales-order-detail";
    viewerOptions.ServiceURL = "/api/BoldReportsAPI";
    viewerOptions.AuthorizationToken = string.Empty;


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

}

renderingBegin

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.

Razor Page

Add the following code in the index.razor file in the Pages folder.

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

Interop File

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

window.BoldReports = {
    RenderViewer: function (dotNetReference, elementID, reportViewerOptions, callback) {
        $("#" + elementID).boldReportViewer({
            reportPath: reportViewerOptions.reportName,
            reportServiceUrl: reportViewerOptions.serviceURL,
            // Notifies the Blazor component before report rendering begins.
            renderingBegin: function (args) {
                if (dotNetReference) {
                    dotNetReference.invokeMethodAsync(callback, args);
                }
            }
        });
    }
}

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.

Razor Page

Add the following code in the index.razor file in the Pages folder.

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

Interop File

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

window.BoldReports = {
    RenderViewer: function (dotNetReference, elementID, reportViewerOptions, callback) {
        $("#" + elementID).boldReportViewer({
            reportPath: reportViewerOptions.reportName,
            reportServiceUrl: reportViewerOptions.serviceURL,
            // Notifies the Blazor component when report export starts.
            reportExport: function (args) {
                if (dotNetReference) {
                    dotNetReference.invokeMethodAsync(callback, args);
                }
            }
        });
    }
}

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.

Razor Page

Add the following code in the index.razor file in the Pages folder.

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

Interop File

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

window.BoldReports = {
    RenderViewer: function (dotNetReference, elementID, reportViewerOptions, callback) {
        $("#" + elementID).boldReportViewer({
            reportPath: reportViewerOptions.reportName,
            reportServiceUrl: reportViewerOptions.serviceURL,
            // Notifies the Blazor component when report processing is canceled.
            reportCanceled: function (args) {
                if (dotNetReference) {
                    dotNetReference.invokeMethodAsync(callback, args);
                }
            }
        });
    }
}

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: