asp.net - rsweb - sql reporting services vb net
Control ReportViewer-Problema de altura (13)
En mi aplicación asp.net, estoy tratando de abrir un informe en particular. Tengo el control ReportViewer establecido con un ancho del 100% y una altura del 100%. Ahora espero que eso signifique que el informe ocupará toda la página. Para mi sorpresa, no es así. En IE7, mientras ocupa todo el ancho de la página, solo ocupa una pequeña parte de la altura. En Firefox, tanto el ancho como la altura están en mal estado. Tengo el navegador abrir una nueva página que ocupa casi toda la pantalla. ¿Algunas ideas?
¡Gracias!
Así es como arreglé mi problema para la altura ... No tan elegante como lo deseo, pero funciona.
function ResizeReport() {
var htmlheight = document.documentElement.clientHeight - 110;
var reportViewer = $(''div[id^=VisibleReportContent<%= this.bddr_report.ClientID %>]'').parent();
reportViewer.css(''height'',htmlheight+''px'');
}
Dan, esto es lo que terminamos haciendo con un poco de magia jQuery.
Todos los informes usaron el mismo Report.Master como la página maestra:
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Report.master.vb" Inherits=".Report" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type="text/css">
html, body
{
margin: 0;
padding: 0;
border: none;
background-color: #FFFFFF;
overflow: hidden;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
setWindowSize();
});
$(window).resize(function () {
setWindowSize();
});
function setWindowSize() {
// http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
var myWidth = 0, myHeight = 0;
if (typeof (window.innerWidth) == ''number'') {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
//IE 6+ in ''standards compliant mode''
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
var r = $(''div[id*="_report_"]:first'');
r.width(myWidth);
r.height(myHeight - 32);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="rptScriptManager1" runat="server" />
<asp:ContentPlaceHolder ID="report" runat="server"/>
</form>
</body>
</html>
Luego, cada página de informe contenía el ReportViewer y sus propiedades.
<%@ Page Title="This Cool Report" MasterPageFile="~/masterpages/Report.Master" Language="vb" AutoEventWireup="false" CodeBehind="viewmycoolreport.aspx.vb" Inherits=".viewmycoolreport" %>
<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>
<asp:Content ID="reportContent" ContentPlaceHolderID="report" runat="server">
<rsweb:ReportViewer ID="rptCoolReport" runat="server" Width="100%" ProcessingMode="Remote" SizeToReportContent="True" />
</asp:Content>
Ahora, cuando se carga el informe, el control ReportViewer termina dimensionándose al tamaño de la ventana de contenido tanto en la ventana lista como en la redimensionada. El selector jQuery toma el primer div con un ID que contiene "_report_" (ya que el control ReportViewer se representa con un id. De cliente de ctl_report_ <id_informe> ). La altura termina teniendo que ser menos de 32 píxeles debido al encabezado en el control ReportViewer (para paginación, exportación, etc.).
En cuanto a lo que he experimentado, el control del visor de informes se representa de forma predeterminada con una altura de 400 px si SizeToReportContent se establece en falso.
Si desea una altura dinámica, debe agregar una clase CSS al visor de informes y al siguiente CSS:
#reportViewerContainer > span
{
display:block;
height:100% !important;
}
.reportViewer
{
height:100% !important;
}
"reportViewerContainer" es el contenedor primario del visor de informes (un div, un cuerpo, etc.). El espectador representa un lapso con altura: 0 y adentro está todo el contenido. Si cambias esto, todo debería funcionar bien.
Esta es la forma en que lo arreglé, eche un vistazo
<div style="Width:auto;">
<form id="form1" runat="server" style="width:100%; height:100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<rsweb:ReportViewer ID="rptViewer" runat="server" Width="100%" Height="100%" AsyncRendering="False" SizeToReportContent="True">
</rsweb:ReportViewer>
</form></div>
Lo que hace la magia es AsyncRendering = "False" SizeToReportContent = "True", el resto es HTML básico. El informe se mostrará tal como fue diseñado.
Puede haber algún código adicional, pero mira si funciona para ti.
Espero eso ayude
Esta es la solución para solucionarlo, estableciendo la altura dinámicamente mediante javascript, funciona tanto con IE como con 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>
- No cambie el siguiente código de ".aspx"
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="ReportViewerForMvc" Name="ReportViewerForMvc.Scripts.PostMessage.js" />
</Scripts>
</asp:ScriptManager>
Aquí estamos reemplazando el ReportViewerForMvc.Scripts.PostMessage.js explícitamente con nuestro propio resizeIframe donde especificamos el ancho
Este código es un poco más largo, pero funciona en todos los navegadores con los que he probado y sin async-rendering. La mejor parte es en modo no asincrónico, se expande al tamaño del contenido del informe. En modo asíncrono, se expande al tamaño de la página (menos el desplazamiento desde la parte superior). Debo señalar que esto es específico de la versión VS2010 del reportviewer.
<script type="text/javascript">
function ResizeReport(reportId){
var rep = document.getElementById(reportId);
var j = 0;
for (var i = 0; i < rep.childNodes.length; i++) {
var child = rep.childNodes[i];
if (child.nodeName == "DIV") {
j++;
if (j == 2) {
child.firstChild.style.overflow = "";
while (child.nodeName == "DIV") {
child = child.firstChild;
}
child.style.width = "1px";
rep.style.width = (child.clientWidth) + "px";
rep.style.height = "";
return;
}
}
}
if (rep.style.height != ''400px'') // default value //
return;
ResizeReportHeight(reportId);
window.onresize = function () { ResizeReportHeight(reportId); }
}
// Used to resize an async-report. Hand edit as needed.
function ResizeReportHeight(reportId, offsetFromBot) {
var rep = document.getElementById(reportId);
var iFrame = rep.getElementsByTagName(''iframe'')[0];
var htmlHeight = document.documentElement.clientHeight;
var offTop = 0;
var obj = iFrame;
while (obj) {
offTop += obj.offsetTop;
obj = obj.offsetParent;
}
var newHeight = (htmlHeight - offTop)
if (offsetFromBot)
newHeight -= offsetFromBot;
if (newHeight < 1)
newHeight = 1;
rep.style.height = "";
iFrame.style.height = newHeight + "px";
}
</script>
<script type="text/javascript">
window.onload = function () { ResizeReport("<%= reportviewer1.ClientID %>"); }
</script>
<rsweb:reportviewer ID="reportviewer1" runat="server" ProcessingMode="Remote" Width="100%" />
Este es un problema con el estándar XHTML 1.1. Cambie su tipo de documento de página a transitorio para obtener el 100% de altura trabajando:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
O si aún tiene dificultades, quítelo por completo.
Hace poco me senté y luché contra el control ReportViewer para expandirme a la altura del contenido del informe mientras permitía .AsyncRendering = true . Esto es lo que hice, que requiere jQuery, y solo se ha probado con 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>
Sé que esta es una vieja pregunta, pero todavía luché con esta recientemente. Parece que lo siguiente funciona bien en todos los navegadores modernos (solo probado IE8 / 9, Firefox y Chrome). Los kickers para mí fueron doctype y la altura del elemento html.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, form { width: 100%; height: 100%; margin: 0; padding: 0 }
</style>
</head>
<body>
<form runat="server">
<asp:scriptmanager runat="server" />
<rsweb:ReportViewer ID="ReportViewerControl" Width="100%" Height="100%" runat="server" />
</form>
</body>
</html>
Tuve el mismo problema con ReportViewer 11.0 y ¿cuál fue el truco para mí?
Height="100%"
SizeToReportContent="true"
while keeping
AsyncRendering="true"
P.ej
<rsweb:ReportViewer ID="reportControl" runat="server" Width="750" Height="100%" AsyncRendering="true" SizeToReportContent="true">
Esto en realidad generó una tabla con height = "100%" para el control.
esta es la manera en que lo arreglé, estableciendo la altura dinámicamente usando javascript, funciona tanto con IE como con Firefox. también funciona con informes mayores que el tamaño de ventana máximo.
<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>
Las siguientes opciones arreglarán su problema de carga de Informe SSRS en la página ASP.NET.
Y hay una propiedad fantástica llamada ZoomMode = "PageWidth" que arreglará su informe en la página completa. también puede usar ZoomMode = "FullPage" o ZoomMode = "Porcentaje" . Todas esas propiedades arreglarán el problema de carga de la página en la página ASP.NET.
<rsweb:ReportViewer ID="ReportViewer1" runat="server" Height="100%" Width="100%" ZoomMode="Percent"></rsweb:ReportViewer>
Dale una altura estática que sea suficiente para toda la altura del informe. Por lo que sé, el 100% no funcionará porque el control ReportViewer está esencialmente envuelto por una gran etiqueta div .