In my asp.net application, I am trying to open a particular report. I have the ReportViewer Control set with width of 100% and height of 100%. Now I expect that to mean that t
This is the solution to fix it, setting the height dynamically using javascript, it works with both IE and Firefox.
<script type="text/javascript">
var ReportViewerForMvc = ReportViewerForMvc || (new function () {
var _iframeId = {};
var resizeIframe = function (msg) {
var height = 360;//here you specify the height if you want to put in
// percent specify value in string like "100%"
var width = 1255;// follow above
$(ReportViewerForMvc.getIframeId()).height(height);
$(ReportViewerForMvc.getIframeId()).width(width);
}
var addEvent = function (element, eventName, eventHandler) {
if (element.addEventListener) {
element.addEventListener(eventName, eventHandler);
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, eventHandler);
}
}
this.setIframeId = function (value) {
_iframeId = '#' + value;
};
this.getIframeId = function () {
return _iframeId;
};
this.setAutoSize = function () {
addEvent(window, 'message', resizeIframe);
}
}());
ReportViewerForMvc.setAutoSize();
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="ReportViewerForMvc" Name="ReportViewerForMvc.Scripts.PostMessage.js" />
</Scripts>
</asp:ScriptManager>
Here we are replacing the ReportViewerForMvc.Scripts.PostMessage.js explicitly with our own resizeIframe where we specifying width
I recently sat down and fought the ReportViewer
control to expand to the height of the report content while still allowing .AsyncRendering = true
. Here's what I did, which requires jQuery, and has only been tested with Report Viewer 2008 (9.0.0.0).
<script type="text/javascript">
$(function() {
$('#<%= uxReportViewer.ClientID %> > iframe:eq(0)').bind('load', function() {
ReportViewerResize(this);
});
});
function ReportViewerResize(frame) {
var container = $('#<%= uxReportViewer.ClientID %>');
try {
var reportFrame = $(frame).contents().find('html')[0].document.frames["report"].document;
var reportHeight = $('div#oReportDiv > table > tbody > tr > td#oReportCell', reportFrame).height();
$(container).css({ height: '' + (reportHeight + 10) + 'px' });
} catch (e) { }
}
</script>
this is the way i fixed it, setting the height dynamically using javascript, it works with both IE and Firefox. also works with reports larger than the maximum window size.
<rsweb:ReportViewer ID="ReportViewer1" runat="server" Width="100%" ShowBackButton="True" ProcessingMode="Remote" />
<script language="javascript" type="text/javascript">
ResizeReport();
function ResizeReport() {
var viewer = document.getElementById("<%= ReportViewer1.ClientID %>");
var htmlheight = document.documentElement.clientHeight;
viewer.style.height = (htmlheight - 30) + "px";
}
window.onresize = function resize() { ResizeReport(); }
</script>
This is an issue with XHTML 1.1 standard. Change your page doctype to transitional to get 100% height working:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
Or if you still struggle, remove it completely.
The following options will fix your SSRS Report loading problem in ASP.NET page.
And there is a fantastic property called ZoomMode="PageWidth" that will fix your report into full page. you also can use ZoomMode="FullPage" or ZoomMode="Percent". All those property will fix your page loading issue in ASP.NET page.
<rsweb:ReportViewer ID="ReportViewer1" runat="server" Height="100%" Width="100%" ZoomMode="Percent"></rsweb:ReportViewer>
As to what I have experienced, the report viewer control renders by default with a height of 400px if SizeToReportContent is set to false.
If you want a dynamic height, you need to add a css class to the report viewer and the following css:
#reportViewerContainer > span
{
display:block;
height:100% !important;
}
.reportViewer
{
height:100% !important;
}
"reportViewerContainer" is the parent container of the report viewer (a div, body etc.). The viewer renders as a span with height: 0 and inside is all the content. If you change this, everything should work fine.