I was just skinning my site with new theme, is it possible to change the loading image (which has green color) of the ReportViewer control?

I tried some solutions suggested but its not working, can anyone guide me on this?

I was just skinning my site with new theme, is it possible to change the loading image (which has green color) of the ReportViewer control?

I tried some solutions suggested but its not working, can anyone guide me on this?

• javascript
• asp
• css
• reporting-services
• reportviewer

• These are embeded inside the reportviewer dll i believe. Sadly, i don't know any easy method to change it. – nunespascal Commented May 28, 2012 at 12:59

2 Answers 2

You can always modify it with CSS.

If you investigate the HTML which is rendered from the ReportViewer control, there should be a <div> called [ID_of_control]_AsyncWait_Wait

On mine, I have the css;

<style>
    /* this will remove the spinner */
    div#ReportViewer1_AsyncWait_Wait img{ display: none; } 
    /* this allows you to modify the td that contains the spinner */
    div#ReportViewer1_AsyncWait_Wait table tbody tr td:first-child{ background: red; width: 100px; height: 100px; } 
</style>

All you need to do is set the background-image on div#ReportViewer1_AsyncWait_Wait table tbody tr td:first-child in order to have your own custom image.

The following solution achieves a replacement loading image using jQuery and CSS. Environment is Visual Studio 2013, ReportViewer 10.0, .NET 4.0.

The technique uses window.setInterval to replace the loading image and keep it replaced. In some instances, such as selecting cascading parameters, the ReportViewer replaces much of its DOM contents, including the loading image. So, simple solutions using a CSS background-image or a one-time replacement of the loading image using jQuery do not work.

Given a ReportViewer control added to a .ASCX user control:

<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=10.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>

<%-- replace stock SSRS wait control ("green spinner") with our own; execute every 200 milliseconds --%>
<script type="text/javascript">
$(document).ready(function () {
    OurApp.timeoutID = window.setInterval(OurApp.reportViewerWaitControlSubstitute, 200);
});
</script>

<rsweb:ReportViewer ID="rvc0" runat="server" ... CssClass="ReportViewerControl" ... >
</rsweb:ReportViewer>

JavaScript:

var OurApp= OurApp|| {};

OurApp.reportViewerWaitControlSubstitute = function () {
    var control = $('.ReportViewerControl div[id$="_AsyncWait_Wait"] img');
    var source = control.attr("src");
    var path = "/media/images/atom.gif";
    var style = "height:48px;width:48px;border-radius:10px;margin-right:10px";
    //don't replace if already our image, or it will not animate
    if (source && (source != path)) {
        control.attr("src", path);
        control.attr("style", style);
    }
}

CSS (for rounded corners and a more even arrangement of image and text):

.ReportViewerControl div[id$='_AsyncWait_Wait'] {
    border-radius:10px;
    padding:15px 15px 0 !important}

The result:

The particular .gif is of an animated atom, and looks very cool when ReportViewer elements are loading!