How to handle Report User Action and Parameter Events in blazor app

This tutorial explains how to handle user-driven actions and customize report parameters in the Bold Reports® Web Report Viewer. The video demonstrates how developers can intercept the View Report button click and control parameter rendering behavior before the report generation process starts.

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, "OnViewReportClick");

}

View Report Click

Fires when the user clicks the View Report button. This event allows you to validate, modify, or inspect parameter values before the report rendering begins. You can also cancel the report loading based on custom conditions.

Razor Page

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

[JSInvokable]
public Task OnViewReportClick(string args)
{
    return ShowToastAsync("View Report button clicked.");
}

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 the View Report button is clicked.
            viewReportClick: function (args) {
                if (dotNetReference) {
                    dotNetReference.invokeMethodAsync(callback, args);
                }
            }
        });
    }
}

Before Parameter Add

Fires before a parameter element is added to the parameter block in the report viewer. This event enables customization of parameter UI elements, default values, or visibility before they are rendered.

Razor Page

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

[JSInvokable]
public Task OnBeforeParameterAdd(string args)
{
    return ShowToastAsync("Parameter element is about to be added…");
}

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 a parameter element is added.
            beforeParameterAdd: function (args) {
                if (dotNetReference) {
                    dotNetReference.invokeMethodAsync(callback, args);
                }
            }
        });
    }
}

Implementation Workflow

User Action Handling

Use the viewReportClick event to intercept user actions and apply validations or conditional logic before rendering the report.

Parameter Customization

Use the beforeParameterAdd event to customize parameter appearance, behavior, or default values dynamically.

To get more details about User Action and Parameter Events, you can check this video: