public TBuilder BeforeRender(
    string callback
)

Public Function BeforeRender(
    callback As String
) As TBuilder

<div id="loader"> <div id="loaderText"> </div> </div>
<script type="text/javascript" id="script">
    function onBeforeRender(s, e) {
        e.reportPreview.zoom = 0.25;
        e.reportPreview.showMultipagePreview = true;
        $("#loaderText").text("Waiting for the first page..");
        //Get a property that contains the document's page information.
        //Subscribe to property change.
        e.reportPreview.events.on('propertyChanged', (args) => {
            if (args.propertyName === 'pages') {
                const newValue = args.newValue;
                if (newValue.length > 0) {
                    $("#loaderText").text("");
                }
            }
        });
    }
</script>

@{
    var viewerRender = Html.DevExpress().WebDocumentViewer("DocumentViewer")
        .Height("1000px")
        .ClientSideEvents(configure => configure.BeforeRender("onBeforeRender"))
        .Bind("TestReport");
    @viewerRender.RenderHtml()
}

<div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl">
        </dxrv-request-options>
        <dxrv-callbacks (BeforeRender)="onBeforeRender($event)">
        </dxrv-callbacks>
    </dx-report-viewer>
</div>

import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';

@Component({
    selector: 'report-viewer',
    encapsulation: ViewEncapsulation.None,
    templateUrl: './report-viewer.html',
    styleUrls: [
        "../../../node_modules/devextreme-dist/css/dx.light.css",
        "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
        "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
        "../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css"
    ]
})
export class ReportViewerComponent {
    @ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
    reportUrl: string = "TestReport";
    invokeAction: string = '/DXXRDV';

    onBeforeRender(event) {
        event.args.reportPreview.zoom = 0.25;
        event.args.reportPreview.showMultipagePreview = true;
        alert("Page load starts...");
        //Get a property that contains the document's page information. 
        var pages = event.args.reportPreview.pages;
        //Subscribe to property change.
        var pagesSubscriptionDispose = event.args.reportPreview.events.on('propertyChanged', (args) => {
            if (args.propertyName === 'pages') {
                if (args.newValue.length > 0) {
                    alert("First page is loaded.");

                pagesSubscriptionDispose();
                }
            }
        });
    }

    constructor(@Inject('BASE_URL') public hostUrl: string) { }
}

'use client';
import ReportViewer, { Callbacks, DxReportViewerRef, RequestOptions } from 'devexpress-reporting-react/dx-report-viewer';

function App() {
  const onBeforeRender = ({ args }): void => {
    args.reportPreview.zoom = 0.25;
    args.reportPreview.showMultipagePreview = true;
    console.log("Page load starts...");
    //Subscribe to property change. 
    args.reportPreview.events.on('propertyChanged', (e) => {
      if (e.propertyName === 'pages') {
        const newValue = e.newValue;
        if (newValue.length > 0) {
          console.log("A page is loaded. Pages.count: " + newValue.length);
        }
      }
    });
  }

  return (
    <>
      <ReportViewer reportUrl="TestExportReport">
        <RequestOptions host="http://localhost:5000/" invokeAction="/DXXRDV" />
        <Callbacks BeforeRender={onBeforeRender} />
      </ReportViewer>
    </>
  )
}

export default App

<template>
    <div ref="viewer" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0" ></div>
    </template>

    <script>
    import 'devexpress-reporting/dx-webdocumentviewer';
    import { DxReportViewer } from 'devexpress-reporting/dx-webdocumentviewer';
    import * as ko from 'knockout';

    export default {
    name: "WebDocumentViewer",
    mounted() {
        const reportUrl = ko.observable("TestReport");
        const viewerRef = this.$refs.viewer;
        const requestOptions = {
            host: "https://localhost:5001/",
            invokeAction: "DXXRDV"
        };
        const callbacks = {  
            BeforeRender: function(s, e){
        e.reportPreview.zoom =0.25;
        e.reportPreview.showMultipagePreview = true;
        alert ("Page load starts...");
        //Subscribe to property change. 
        e.reportPreview.events.on('propertyChanged', (args) => {
        if(args.propertyName === 'pages') {
            const newValue = args.newValue;
            if (newValue.length > 0) {
                alert ("First page is loaded.");
            }
        }
        });
        }
        };
        const viewer = new DxReportViewer(viewerRef, { reportUrl, requestOptions, callbacks });
    viewer.render();
    },
    beforeUnmount() {
        ko.cleanNode(this.$refs.viewer);
    }
    };
    </script>