How to handle Rendering and Report Events in React Application

This tutorial explains how to implement rendering and report‑related events in the Bold Reports^® Web Report Viewer within a React application. The video demonstrates how developers can hook into report life cycle stages to manage rendering flow, export actions, cancellation, and toolbar customization.

To get more details about Rendering and Report Events in React applications, you can check this video:

Rendering Begin

Fires before the report rendering process starts. This event can be used to perform actions such as displaying loaders or validating conditions before rendering.

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

Report Canceled

Triggered when the report rendering process or export operation is canceled. This event is useful for handling cleanup actions or resetting UI elements.

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

Toolbar Rendering

Occurs when the report viewer toolbar is being rendered. This event allows developers 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>

Rendering Complete

Fires after the report rendering is completed. This event is commonly used for post‑rendering logic such as hiding loaders or accessing report parameters.

<div id="report-viewer"></div>
<script>
    $("#report-viewer").boldReportViewer({
        renderingComplete: function (args) {
            // Write a code block to perform any operation
            // after rendering is completed.
        }
    });
</script>

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.

<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>