How to use Progress and Ajax Events in Angular Application

This tutorial explains how to handle progress-related and AJAX life cycle events in the Bold Reports^® Web Report Viewer within an Angular application. The video demonstrates how developers can monitor export and print progress and intercept AJAX requests during report processing.

Export Progress Changed

Fires when the export progress changes. This event can be used to show custom progress indicators while exporting reports.

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

Print Progress Changed

Fires when the print operation progress changes. This event helps track the printing process page by page.

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

Ajax Before Load

Triggered before an AJAX request is sent to the server. This event allows you to add authorization tokens, custom headers, or modify request data.

<div id="report-viewer"></div>
<script>
    $("#report-viewer").boldReportViewer({
        ajaxBeforeLoad: function (args) {
            // Write a code block to modify headers, tokens, or request data
            // before the AJAX request is sent.
        }
    });
</script>

Ajax Success

Fires when an AJAX request completes successfully. This event can be used to track server responses or log successful operations.

<div id="report-viewer"></div>
<script>
    $("#report-viewer").boldReportViewer({
        ajaxSuccess: function (args) {
            // Write a code block to perform any action after a successful AJAX response.
        }
    });
</script>

Ajax Error

Fires when an AJAX request fails. This event helps in handling server-side or network-related errors.

<div id="report-viewer"></div>
<script>
    $("#report-viewer").boldReportViewer({
        ajaxError: function (args) {
            // Write a code block to handle AJAX request errors.
        }
    });
</script>

Implementation Workflow

Progress Monitoring

Use the export and print progress events to display real-time status during long-running operations.

Ajax Control

Leverage AJAX life cycle events to inject authentication tokens, handle errors, and customize server communication flow.

If you want more details about Progress and AJAX Events in Angular, you can check this video: