How to use Rendering and Report Events in Angular Application

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

Rendering Begin

Fires before the report rendering process starts. This event can be used to perform actions such as showing loading indicators 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 or export process is canceled. This event helps in handling cleanup actions or resetting the UI state.

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

Toolbar Rendering

Occurs when the report viewer toolbar is being rendered. This event allows customization of toolbar items before they are displayed.

Rendering Complete

Fires after the report has been rendered completely. This event is useful for executing post‑rendering logic.

Report Export

Fires when the report export process is initiated. This event allows you to intercept or customize export behavior.

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