Track Report Generation Progress in WebViewer Control

February 04 2015

INTRODUCTION

A while back, I wrote a blog article about checking the report generation progress in a Windows Forms application. It was a simple implementation and was restricted only to Section Based Reports. However, I have seen couple of requests where users want to track their report generation progress over the web, regardless of the report type they are working with. With the release of ActiveReports 9 recently, I think now is a good time to showcase this functionality. In order to display reports over the web, the first thing one will come across is the WebViewer control. It offers different viewer types but in this blog our point of interest is the FlashViewer. The reason for choosing this viewer type is its client side API which we need to track the report generation progress. Also since we need to have a control to display the report generation progress, I am using the C1ProgressBar control which is a part of our Studio for ASP.NET Wijmo suite. Here is a glimpse of the final sample in action (Click the image to see it working).

IMPLEMENTATION

The C1ProgressBar control takes a value which ranges from 0 to 100. So we need to constantly increment its value on the basis of the number of pages in the report and the current page being generated. To do this, we will handle the "OnLoadProgress" event of the FlashViewer which fires for each generated page of the report. We will get the total number of pages in the report in this event and using that, we will know the exact value which has to be updated for the C1ProgressBar control. The JavaScript code below should make things clearer.

JavaScript Code

var viewer;  
function init() {  
   GrapeCity.ActiveReports.Viewer.OnLoad("WebViewer1", function () {  
      viewer = GrapeCity.ActiveReports.Viewer.Attach("WebViewer1");  
      viewer.setEventsHandler({  
         OnLoadProgress: function (e) {  
            var pageCount = e.PageCount;  
            var valToIncrease = 100 / pageCount;  
            var oldVal = $("#C1ProgressBar1").c1progressbar("option", "value");  
            var newVal = oldVal + valToIncrease;  
            $("#C1ProgressBar1").c1progressbar("option", "value", newVal);  
         }  
      });  
   });  
}

And this is how our HTML markup will look.

HTML Code

<body onload="return init()">  
   <form id="form1" runat="server">  
   <asp:Label ID="Label1" runat="server" Text="Report Generation Progress:-"></asp:Label>  
   <wijmo:C1ProgressBar ID="C1ProgressBar1" runat="server" FillDirection="East">  
   </wijmo:C1ProgressBar>  
   <div>  
      <ActiveReportsWeb:WebViewer ID="WebViewer1" runat="server" Height="571px" ReportName="file: MovieCatalog.rdlx"  
Width="1073px" ViewerType="FlashViewer">  
         <FlashViewerOptions MultiPageViewColumns="1" MultiPageViewRows="1" UseClientApi="True">  
</FlashViewerOptions>  
      </ActiveReportsWeb:WebViewer>  
   </div>  
   </form>  
</body>

That is all we need. To see it in action, you may download the sample application from the download link below.

MESCIUS inc.