The ASP.NET Report Viewer provides a wonderful job when viewing local or server (remote) reports beside its rich feature provided like printing, exporting and report and pages navigation tools
But the report viewer control itself didn't provide any tools to display the report control inside web controls correctly to stretch in height.
To solve the problem, JavaScript methods can resize the report viewer control to fit inside its control height as follows:
- When document is ready do the following
- Start a timer to enforce the report viewer height change. This timer is important because the report viewer height is not adjusted until it is fully loaded. If we change the height before the report viewer finished loading the report, the original report viewer height will be used
- In the timer function, we adjust the report viewer height
- Clear the timer when the report viewer height adjusted successfully
- Start a timer to enforce the report viewer height change. This timer is important because the report viewer height is not adjusted until it is fully loaded. If we change the height before the report viewer finished loading the report, the original report viewer height will be used
- When document window resize, set the report viewer height again
- Report height calculation is calculated to fit the window height minus the report viewer control toolbar to avoid displaying vertical scroll bar in the report viewer container
Note that you should set the SizeToReportContent property to false to avoid the report viewer auto calculate its height to fit the report content height.
The below ASPX page code describes how to fit the report viewer to the entire window of the browser (tried in IE 9 and chrome)
<%@
Page
Language="C#" AutoEventWireup="true" CodeBehind="ReportViewer.aspx.cs" Inherits="NCS.Website.Reports.ReportViewer"
%>
<%@
Register
Assembly="Microsoft.ReportViewer.WebForms, Version=10.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"
Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb"
%>
<!DOCTYPE
html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script
type="text/jscript" src="../Scripts/jquery-1.5.1.min.js">
</script>
<script
type="text/jscript">
var reportViewer = $('#<%= this.ReportViewer1.ID %>_ctl10').parent('td');
var rvId = '<%= this.ReportViewer1.ID %>';
$(document).ready(function () {
// Enforce height on the report viewer
var oldHeight = reportViewer.height();
// Poll the report height so it can be set after the Report Viewer has
// fully loaded. Otherwise the RV will default to original config
var intevalId = setInterval(function () {
if (reportViewer.height() != oldHeight) {
clearInterval(intevalId);
}
var rv = $find(rvId);
if (!rv.get_isLoading()) {
SetHeight(reportViewer, rvId);
}
}, 1000);
// Resize report viewer when windows resizes
$(window).resize(function () {
SetHeight(reportViewer, rvId);
});
});
function ReportHeight() {
var windowHeight = $(window).height();
var reportBar = $('span#ReportViewer_Toolbar').height();
var totalReportHeight = windowHeight - reportBar;
return totalReportHeight;
};
function SetHeight(rptViewer, rvId) {
var rv = $find(rvId);
if (!rv.get_isLoading()) {
rptViewer.css("height", ReportHeight() + "px");
}
};
</script>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head
runat="server">
<title></title>
</head>
<body>
<form
id="form1" runat="server">
<asp:ScriptManager
runat="server"
/>
<div>
<rsweb:ReportViewer
ID="ReportViewer1" runat="server" Width="100%" Height="100%"
ZoomMode="FullPage" ShowDocumentMapButton="False" AsyncRendering="True" SizeToReportContent="False">
</rsweb:ReportViewer>
</div>
</form>
</body>
</html>
Waiting your comments…
1 comment:
It is giving error - 'this' is not declared. It may be inaccessible due to its protection level.
Post a Comment