最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Reportviewer control loading indicator in ASP.NET - Stack Overflow

programmeradmin6浏览0评论

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?

Share Improve this question asked May 28, 2012 at 12:33 MaxRecursionMaxRecursion 4,91112 gold badges44 silver badges77 bronze badges 1
  • 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
Add a ment  | 

2 Answers 2

Reset to default 6

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!

发布评论

评论列表(0)

  1. 暂无评论