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 BoldReportViewerOptions.cs file. This defines the ReportViewerEvents, CallBacks for linking event names to handler methods, and the BoldReportParameter class for parameter metadata.

namespace BlazorReportingTools.Data
{
    public static class ReportViewerEvents
    {
        public const string ViewReportClick    = "viewReportClick";
        public const string BeforeParameterAdd = "beforeParameterAdd";
    }

    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();

        public class BoldReportParameter
        {
            public string Name { get; set; } = string.Empty;
            public List<string> Values { get; set; } = new();
            public string popupWidth { get; set; } = string.Empty;
            public string popupHeight { get; set; } = string.Empty;
            public DateTime minDateTime { get; set; }
            public DateTime maxDateTime { get; set; }
            public string itemWidth { get; set; } = string.Empty;
            public string labelWidth { get; set; } = string.Empty;
        }
    }
}

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.ViewReportClick]    = nameof(Index.OnViewReportClick),
                [ReportViewerEvents.BeforeParameterAdd] = nameof(Index.OnBeforeParameterAdd)
            };

            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: {
        ViewReportClick:    "viewReportClick",
        BeforeParameterAdd: "beforeParameterAdd"
    },

    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 when the View Report button is clicked.
            viewReportClick: function (args) { invoke(events.ViewReportClick, args); },

            // Notifies the Blazor component before a parameter element is added.
            beforeParameterAdd: function (args) { invoke(events.BeforeParameterAdd, 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.

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.

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

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.

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

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 before they are rendered in the viewer.

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