How to use Bold Reports® events for Toolbar, Export, and Parameter Events in JavaScript

This tutorial explains how to customize the Report Viewer toolbar, handle export actions, and modify report parameters using client-side events in the Bold Reports® Web Report Viewer. The video demonstrates how these events help developers control user interactions and report behavior at runtime.


Key Events Explained

Toolbar Rendering

Triggered while rendering the report viewer toolbar. This event allows you to customize or modify toolbar items before they are displayed.

<div id="report-viewer"></div>
<script>
    $("#report-viewer").boldReportViewer({
        toolbarRendering: function (args) {
            // Write a code block to customize the report viewer toolbar.
        }
    });
</script>

Toolbar Item Click

Fires when a toolbar item is clicked. This event can be used to capture custom toolbar actions.

<div id="report-viewer"></div>
<script>
    $("#report toolbar item is clicked.    $("#report-viewer").boldReportViewer({
        }
    });
</script>
        toolBarItemClick: function (args) {

Export Item Click

Triggered when a user selects an export format from the export dropdown. This event helps track or override export behavior.

<div id="report-viewer"></div>
<script>
    $("#report-viewer").boldReportViewer({
        exportItemClick: function (args) {
            // Write a code block to perform any action when the export item is clicked.
        }
    });
</script>

Report Export

Fires when the report export process begins. This event allows you to execute logic before exporting the report.

<div id="report-viewer"></div>
<script>
    $("#report-viewer").boldReportViewer({
        reportExport: function (args) {
            // Write a code block to perform any operation before exporting the report.
        }
    });
</script>

Before Parameter Add

Triggered before adding a parameter element to the parameter pane. This event helps customize parameter UI elements or behavior.

<div id="report-viewer"></div>
<script>
    $("#report-viewer").boldReportViewer({
        beforeParameterAdd: function (args) {
            // Write a code block to modify the report parameter element before it is added.
        }
    });
</script>

Implementation Workflow

Toolbar Customization

Use toolbar-related events to add, remove, or intercept toolbar actions.

Export Handling

Capture export-related events to validate, log, or customize export behavior.

Parameter Customization

Modify parameter appearance or behavior dynamically during parameter rendering.

If you want more details about Toolbar, Export, and Parameter Events, you can check this video: