ASP.NET의 Reportviewer 컨트롤로드 표시기

Question

새 테마로 내 사이트를 스키닝하는 중이었습니다. ReportViewer 컨트롤의 로딩 이미지 (녹색으로 표시됨)를 변경할 수 있습니까?

나는 몇 가지 해결책을 제안했지만 작동하지 않는 사람이 나를 안내 할 수 있습니까?

Answer 1

언제든지 CSS로 수정할 수 있습니다. 당신이 ReportViewer 컨트롤에서 렌더링되는 HTML을 조사하는 경우

는 [ID_of_control]_AsyncWait_Wait 내에서

, 나는 CSS를 가지고라는 <div>이 있어야한다;

<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> 

당신이해야 할 모든 사용자 정의 이미지를 위해 div#ReportViewer1_AsyncWait_Wait table tbody tr td:first-child에 background-image 설정됩니다.

Answer 2

다음 해결책은 jQuery와 CSS를 사용하여 대체로드 이미지를 얻는 것입니다. 환경은 Visual Studio 2013, ReportViewer 10.0, .NET 4.0입니다.

이 기술은 로딩 이미지 을 대체하고 교체 유지 window.setInternal을를 사용합니다. 계단식 매개 변수를 선택하는 경우와 같이 ReportViewer는로드하는 이미지를 포함하여 DOM 내용의 대부분을 대체합니다. 따라서 CSS 배경 이미지를 사용하는 간단한 솔루션이나 jQuery를 사용하여로드하는 이미지를 한 번만 대체하면 작동하지 않습니다.

ReportViewer 컨트롤은의 .ascx 사용자 컨트롤에 첨가 주어 (둥근 모서리와 이미지 및 텍스트를보다 균일 한 배열)

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 :

<%@ 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> 

스크립트

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

결과 :

특정 .gif는 애니메이션 원자이며 ReportViewer 요소가로드 될 때 매우 멋지게 보입니다.