How to find when reportviewer is loaded using reportviewer api

Question

I have created a single page for all my reports and I am loading different versions of those reports (line, pie, chart, graph, etc) with a toolbar I made. All is working well there, except on the non-table type charts (line,pie,bar,etc). When those get rendered, I found that the text in the legends and series become blurry and through some research here and other places found that they are converted to images, which are then getting resized on me though a css class that is auto generated.

Firstly, what i'm trying to do: I want to remove this class from the image that is generated at the time it is loaded. If i turn off async rendering on my report

AsyncRendering="false"

Along with this bit of jquery (targeting the div that contains the reportviewer):

$(document).ready(function () {
    $('#reportDiv img').removeAttr('class');

});

Then the result is as expected. The image is not scaled and all is well. The problem, however, is that some of these reports may be quite large, resulting in the user not having any visual feedback of whether or not something is happening. I would like to continue using async rendering, so I started to look at the reportviewer javascript api.

Sys.Application.add_load(function () {
        var reportViewer = $find("ctl00_mainContentPlaceHolder_ReportViewer1");
        reportViewer.add_propertyChanged(viewerPropertyChanged);
    });

function viewerPropertyChanged(sender, e) {
        var viewer = $find("ctl00_mainContentPlaceHolder_ReportViewer1");

        if (e.get_propertyName() === "isLoading") {

            var button = document.getElementById("ctl00_mainContentPlaceHolder_ctlReportParamModuleId1_btnRunReport");
            button.disabled = viewer.get_isLoading();
        }
        else {

            if ($find("ctl00_mainContentPlaceHolder_ReportViewer1").get_reportAreaContent() == Microsoft.Reporting.WebFormsClient.ReportAreaContent.ReportPage) {
                alert("here");

            }
        }
    }

The first portion (isLoading) works as expected disabling the button. However immediately upon load I get

Object doesn't support property or method 'get_reportAreaContent'

Am I missing something obvious? These are the links from msdn that I used for reference:

Dekryptid Dekryptid · Accepted Answer · 2014-08-22T20:07:30

Bar graphs, Line graphs, pie charts, etc. are rendered as images. The images get re-sized based on the size of the report viewer control. Instead of using AsyncRendering="false", I created this javascript workaround and it has solved my problem.

var app = Sys.Application;
app.add_init(ApplicationInit);

function ApplicationInit(sender) {
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (!prm.get_isInAsyncPostBack()) {
        prm.add_endRequest(EndRequest)
    }
}

function EndRequest(sender, args) {
    var reportViewerControlId = "ReportViewer1";
    if (sender._postBackControlClientIDs[0].indexOf(reportViewerControlId) >= 0) {
        var reportViewerControlContainer = "reportViewerContainer"; // Id of <DIV>
        var renderedReportImage = $("#" + reportViewerControlContainer + " img");
        renderedReportImage.removeAttr("style").removeAttr("class");
        var styleAttr = renderedReportImage.attr("style");
        var classAttr = renderedReportImage.attr("class");
        if (typeof styleAttr === 'undefined') {
            console.log("Successfully removed the style attribute from the rendered report image!");
        }
        if (typeof classAttr === 'undefined') {
            console.log("Successfully removed the class attribute from the rendered report image!");
        }
    }
}

Basically, I am listening to the endRequest of the PageRequestManager for my ReportViewerControl's ID, then simply removing the style and class attributes from the image to display it unmodified.

How to find when reportviewer is loaded using reportviewer api

1 Answers