介绍
论坛中有用户提到如何在 ActiveReports WebViewer 控件中添加加载进度条，来提示用户当前加载进度增强用户体验。
在本篇文章中我们将阐述如何在 WebViewer 的 浏览类型为FlashViewer 时添加进度条， 选择这个浏览方式的原因是我们需要使用http://helpcentral.componentone.com/nethelp/AR8Help/AR8_HelpOnlineEN/arWLKCustomFlashViewer.htm 来跟踪前端的加载进度。
在本篇博客中，我们使用 C1ProgressBar 控件来展示加载进度，
最终效果图如下：
实现方法：
设置 C1ProgressBar 控件的范围为 0 到 100。主要实现方法为捕获“OnLoadProgress” 事件，获取当前渲染进而获取当前加载进度，代码如下：
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);
}
});
});
}
HTML标记代码下：
<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.
Demo下载：
VS2010 + C# + AR9.0 + .NET4.0
更多ActiveReports报表功能请参考：/developer/activereports
