I'm embedding a Report into an iframe (the report is fetched with .NET ReportingServices)

I'd like to launch a Javascript function once the report is loaded.

I tried:

window.addEventListener("load", ...)

But as the report result is loaded with Javascript, window.load is triggered before the report is effectively loaded.

Are there some Javascript functions exposed that would allow me to handle the report load? Like:

the_report.loaded(function () {
  alert(document.height);
});

By the way the aim is to get the final rendered document height.

I'm embedding a Report into an iframe (the report is fetched with .NET ReportingServices)

I'd like to launch a Javascript function once the report is loaded.

I tried:

window.addEventListener("load", ...)

But as the report result is loaded with Javascript, window.load is triggered before the report is effectively loaded.

Are there some Javascript functions exposed that would allow me to handle the report load? Like:

the_report.loaded(function () {
  alert(document.height);
});

By the way the aim is to get the final rendered document height.

• javascript
• reporting-services
• dom-events

• In case you hadn't found it yet: here's the MSDN reference for client side ReportViewer programming. – Jeroen Commented Dec 10, 2012 at 12:33

3 Answers 3

Here is exactly what I ended up with (iframe side)

/* This will run only when all ReportingService JS is loaded */
Sys.Application.add_load(function () {
    /* Let's consider the report is already loaded */
    loaded = true;
    /* The function to call when the report is loaded */
    var onLoad = function () {
        alert(document.body.scrollHeight);
        /* Set the report loaded */
        loaded = true;
    };
    /* The report instance */
    var viewerReference = $find("ReportViewer1");

    /* The function that will be looped over to check if the report is loaded */
    check_load = function () {
        var loading = viewerReference.get_isLoading();
        if (loading) {
            /* It's loading so we set the flag to false */
            loaded = false;
        } else {
            if (!loaded) {
                /* Trigger the function if it is not considere loaded yet */
                onLoad();
            }
        }
        /* Recall ourselves every 100 miliseconds */
        setTimeout(check_load, 100);
    }

    /* Run the looping function the first time */
    check_load();
})

Javascript support is minimal at best. Sadly these controls are still behind with the times on most fronts. You can find what is exposed and documented here:

http://msdn.microsoft./en-us/library/dd756405(VS.100).aspx

Luckily for you there is a get_isLoading() function you can call:

http://msdn.microsoft./en-us/library/dd756413(v=vs.100).aspx

Try something like this:

(function() {

    var onLoad = function() {
       // Do something...
    };
    var viewerReference = $find("ReportViewer1");

    setTimeout(function() {
        var loading = viewerReference.get_isLoading();

        if (!loading) onLoad(); 
    },100);

})();

Building off of Pierre's solution, I ended up with this. (Simplified to have it only call until it loaded once, since it seemed to run after every load)

Note: my report configuration was SizeToReportContent="true" AsyncRendering="false", so that might be part of why I could simplify it.

Sys.Application.add_load(function () {
    var viewerReference = $find("ReportViewer1");
    check_load = function () {
        if (viewerReference.get_isLoading()) {
            setTimeout(check_load, 100);
        } else {
            window.parent.ReportFrameLoaded();
        }
    }
    check_load();
});