How to set ReportViewer height and width to 100%

1 Answer 7414 Views

General Discussions

1 Answer, 1 is accepted

Randall

commented on 27 Oct 2008, 01:27 PM

Hello Steve,

Thanks for the response. What do you mean by using a less restrictive DOCTYPE? Can you give me an example of one that would work with the style changes you recommend?

I do have this "sort-of" working by adding some JavaScript to the page to handle window resizing and to calculate the height of the report viewer. This is not the best solution in my opinion.

Thanks,

Randall Price

Steve

commented on 27 Oct 2008, 01:47 PM

Hello Randall,

You can see available doctypes and how they control the browser modes in the info table provided here. For example using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> IE should display the ReportViewer height properly.

Sincerely yours,
Steve
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

Chris Metz

commented on 07 Feb 2009, 06:26 PM

Hi Randall,

Do you mind sharing the steps you took to embed the report viewer in SharePoint (I have tried web parts, the designer, etc and no sucess)?
Also, did you have success with getting the viewer to show at 100%? I am also attempting the same.

Thank you very much!
Chris

commented on 09 Feb 2009, 07:14 AM

Hi ALL,

I cannot get the viewer to display at 100% height eventhough I have done Steve's suggestion.
Any help will be appreciated.

Thanks and regards,
Fety

Steve

commented on 09 Feb 2009, 08:21 AM

Hello Fety,

Can you describe what is the behavior you receive after following the info I've provided? Did you "apply height to the whole DOM tree" for your specific page as advised? Note that without doing this you would not be able to stretch the viewer to 100% height. For more info please review the ReportViewer.aspx page from the examples shipped with Telerik Reporting installation.

Kind regards,
Steve
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

commented on 09 Feb 2009, 08:53 AM

Hi Steve,

Thanks for your quick response.

Yes, I have applied the height to the whole DOM tree for the specific page as advised. The result that I got is there is not even a single line displayed (in other words, it is the same as if I set the height as 0px).

However, if I set the ReportViewer height to 1100px (as mentioned in http://www.telerik.com/community/forums/reporting/telerik-reporting/generating-report-position.aspx), the vertical scroll bar will be removed and I will have the web browser vertical scroll bar only. Is there any drawback if I use this method?

Thanks,
Fety

Steve

commented on 09 Feb 2009, 09:30 AM

Hi Fety,

These are two different things, and having specific height/width would only work as expected, when you work with a predefined resolution only. If a user has a smaller/bigger screen with different resolution it would not look right.

All the best,
Steve
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

commented on 09 Feb 2009, 09:36 AM

Hi Steve,

In this case, how would you suggest me to do? Since with the first method, I am not able to get what I expected.
Thank you very much in advance.

Best Regards,
Fety

Steve

commented on 09 Feb 2009, 09:39 AM

Hello Fety,

Open a support ticket and attach your runnable sample page there, so that we can review what is causing the problems.

All the best,
Steve
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

Randall

commented on 09 Feb 2009, 07:00 PM

Hello Chris and Fety,

Here is the contents of my SharePoint page that hosts the RadControls ASP.NET AJAX ReportViewer control:

    
            <%@ Page masterpagefile="_catalogs/masterpage/vt_initiatives.master" 
        
                     language="C#" 
        
                     title="Policy Group Document" 
        
                     inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" 
        
                     meta:progid="SharePoint.WebPartPage.Document" 
        
                     %> 
        
            <%@ Import Namespace="Microsoft.SharePoint" %> 
        
            <%@ Register Tagprefix="SharePoint"   Namespace="Microsoft.SharePoint.WebControls"  Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
        
            <%@ Register Tagprefix="Utilities"    Namespace="Microsoft.SharePoint.Utilities"    Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
        
            <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
        
            <%@ Register TagPrefix="telerik"      Namespace="Telerik.ReportViewer.WebForms"     Assembly="Telerik.ReportViewer.WebForms, Version=2.5.8.519, Culture=neutral, PublicKeyToken=a9d7983dfcc261be" %> 
        
            <asp:Content ContentPlaceHolderId="PlaceHolderPageTitleInTitleArea" runat="server">  
        
                Policy Group Document     
        
            </asp:Content> 
        
            <asp:Content ContentPlaceHolderID="PlaceHolderPageImage" runat="server">  
        
                <img width="145" height="54" src="/_layouts/images/slicon.png" alt="" /> 
        
            </asp:Content> 
        
            <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">  
        
                <script type="text/javascript">  
        
                <!-- Hide from JavaScript-impaired browsers  
        
                    window.onload   = calcSize;  
        
                    window.onresize = calcSize;  
        
                    function calcSize()  
        
                    {  
        
                        var objWrapper  = document.getElementById("report_wrapper");  
        
                        var objPosition = getPosition(objWrapper);  
        
                        var newHeight   = document.body.clientHeight - objPosition.y - 6;  
        
                        if (newHeight > 100) {  
        
                            objWrapper.style.height = newHeight;  
        
                        }  
        
                        var newWidth  = document.body.clientWidth - objPosition.x - 15;  
        
                        if (newWidth > 100) {  
        
                            objWrapper.style.width = newWidth;  
        
                        }  
        
                    }  
        
                    function getPosition(element)  
        
                    {  
        
                        var left = 0;  
        
                        var top  = 0;  
        
                        if (element != null) {  
        
                            // Try because sometimes errors on offsetParent after DOM changes.  
        
                            try {  
        
                                while (element.offsetParent) {  
        
                                    // While we haven't got the top element in the DOM hierarchy  
        
                                    // Add the offsetLeft  
        
                                    left += element.offsetLeft;  
        
                                    // If my parent scrolls, then subtract the left scroll position  
        
                                    if (element.offsetParent.scrollLeft) {  
        
                                        left -= element.offsetParent.scrollLeft;  
        
                                    }  
        
                                    // Add the offsetTop  
        
                                    top += element.offsetTop;  
        
                                    // If my parent scrolls, then subtract the top scroll position  
        
                                    if (element.offsetParent.scrollTop) {  
        
                                        top -= element.offsetParent.scrollTop;  
        
                                    }  
        
                                    // Grab  
        
                                    elementelement = element.offsetParent;  
        
                                }  
        
                            }  
        
                            catch (e) {  
        
                                // Do nothing  
        
                            }  
        
                            // Add the top element left offset and the windows left scroll and  
        
                            // subtract the body's client left position.  
        
                            left += element.offsetLeft + document.body.scrollLeft - document.body.clientLeft;  
        
                            // Add the top element top offset and the windows top scroll and  
        
                            // subtract the body's client top position.  
        
                            top += element.offsetTop + document.body.scrollTop - document.body.clientTop;  
        
                        }  
        
                        return {x:left, y:top};  
        
                    }  
        
                // End hiding--> 
        
                </script> 
        
                <link rel="stylesheet" type="text/css" 
        
                      href="mvwres:1-Telerik.ReportViewer.WebForms.Skins.Default.ReportViewer.css,Telerik.ReportViewer.WebForms, Version=2.5.8.519, Culture=neutral, PublicKeyToken=a9d7983dfcc261be" /> 
        
                <link rel="stylesheet" type="text/css" 
        
                      href="mvwres:1-Telerik.ReportViewer.WebForms.Resources.ReportViewerInternal.css,Telerik.ReportViewer.WebForms, Version=2.5.8.519, Culture=neutral, PublicKeyToken=a9d7983dfcc261be" /> 
        
                <div id="report_wrapper" style="border: solid 1px #BDC3CE; height: 400px; width: 600px;">  
        
                    <telerik:ReportViewer  
        
                        ID="ReportViewer" runat="server" 
        
                        Height="100%" 
        
                        Width="100%" 
        
                        Report="ReportLibrary.PolicyGroupDoc, ReportLibrary, Version=1.0.0.0, Culture=neutral, PublicKeyToken=c29b700b22f137c2" 
        
                        Skin="WebBlue" 
        
                        ZoomMode="Percent" 
        
                        ZoomPercent="100"/>  
        
                </div> 
        
            </asp:Content>

In my case, I have set the <div> containing the ReportViewer to initially display at 400x600 pixels because it seemed like it needed to be set to something and this was as good a value as any. The JavaScript code immediately resizes the <div> to fill the height and width to 100%. I had to tweak the height and width values until I got just the look I wanted (thus the "- 6" and the "- 15" in the calculation in the calcSize() function. The side affect is that the ReportViewer initially comes up as 400x600 while loading, but once loaded, properly resizes to fill the <div> 100%. I can live with this.

I noticed after I initially posted this issue, Steve from Telerik has added a few comments about properly applying the padding and margin styles to the entire DOM tree. I have not explored this technique in full, but if I do I will post my results here.

Hope this helps,

Randall Price

Jose

commented on 21 Jul 2009, 10:51 PM

Hi.

I'm having an issue with this solution.

I open a RadWindow with a page that has a reportviewer. My page is as follow:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PrintJob.aspx.cs" Inherits="Mediacom.Web.PrintJob" %> 
        
            <%@ Register TagPrefix="telerik" Assembly="Telerik.ReportViewer.WebForms" Namespace="Telerik.ReportViewer.WebForms" %> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server"> 
        
                <title></title> 
        
                <style type="text/css">    
        
                  #rptvwrMainViewer_ReportToolbar_NavGr_CurrentPage_TotalPages 
        
                  { 
        
                    width: 50px; 
        
                  } 
        
                  html#html, body#body, form#form1, div#content, center#center 
        
                  {  
        
                   border: 0px solid black; 
        
                   padding: 0px; 
        
                   margin: 0px; 
        
                   height: 100%; 
        
                  } 
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <div> 
        
                    <telerik:ReportViewer ID="rptvwrMainViewer" runat="server" Width="100%" Height="100%" 
        
                        ShowParametersButton="False" Skin="WebBlue"> 
        
                    </telerik:ReportViewer>     
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

It works ok with Firefox, but on IE it doesn't work. It's only showing the reportviewer toolbar but no report, just a line.

What's wrong with my implementation?

Thanks.
Jose Guay

Jose

commented on 21 Jul 2009, 11:02 PM

Nevermind.

Just found out how to make it work. Modified the following lines:

    
                <form id="form1" runat="server" style="height:100%; width:100%"> 
        
                <div style="height:100%; width:100%">

Thanks!
Jose Guay

Phil

commented on 20 Sep 2012, 06:30 PM

Sorry for the thread resurrection, but these solutions no longer work. Firefox 15 shows a truncated reportviewer, IE9 shows nothing.

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="rpt1.aspx.vb" Inherits="OSCARweb.rpt1" %>

<%@ Register Assembly="Telerik.ReportViewer.WebForms, Version=6.1.12.820, Culture=neutral, PublicKeyToken=a9d7983dfcc261be" Namespace="Telerik.ReportViewer.WebForms" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title>telerik Report Viewer</title>

<style type="text/css">

form#form1, div#content

{

height: 100%;

}

</style>

</head>

<body>

<form id="form1" runat="server" style="height: 100%; width: 100%">

<div style="height: 100%; width: 100%">

<telerik:ReportViewer ID="ReportViewer1" runat="server" Height="100%" Width="100%" />

</div>

</form>

</body>

</html>

Steve

commented on 21 Sep 2012, 08:24 AM

Hi Phil,

The provided solution in our first post in this thread is valid, but you just have not implemented it correctly. If you copy the <style></style> from it as is (or only leave the height css attribute), you would notice that the viewer would be displayed correctly i.e.:

<style type="text/css">

html#html, body#body, form#form1, div#content

{

height: 100%;

}

</style>

Another option you have is changing the DOCTYPE on your page as mentioned in the second post from this thread i.e.:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Both solutions yielded the same correct result.

Kind regards,
Steve
the Telerik team

BLOGGERS WANTED! Write a review about Telerik Reporting or the new Report Designer, post it on your blog and get a complimentary license for Telerik Reporting. We’ll even promote your blog and help bring you a few fresh readers. Yes, it’s that simple. And it’s free. Get started today >

Phil

commented on 24 Sep 2012, 11:15 AM

Thanks Steve, it did work once I copied the code correctly. My apologies, I was having blood sugar issues and my brain was obviously not working properly!

I've got some issues with scrollbars to work out, but I'm on the right track now.

Cheers

JanwalkarPooja

commented on 14 May 2014, 07:13 AM

Hi Steve,

In my project rsweb:reportViewer is used.I'm facing same issue in IE11. I want to resize the ReportViewer to 100% of available space on the screen.and need to shows up both scrollbar.But the ReportViewer does NOT fill up the screen width ,inside content getting cut ,not displaying scrollbar.

I have added as per you mentioned respective solution,but still not get proper result.
Please help to provide the solution as soon as possible.
Looking forward your reply.
<%@ page language="C#" autoeventwireup="true" inherits="Reports_ReportViewer" validaterequest="false" enableeventvalidation="false" stylesheettheme="xxx" %>

<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken="" Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Report Viewer</title>
<script type="text/javascript">
//Bhavesh.Bagadiya(12/5/14) - To prevent frequent resize computations
var tmrResize = null;
if (window.getComputedStyle != null) {
var orginalGetComputedStyle = window.getComputedStyle;
window.getComputedStyle = function (element, parm) {
try {
return orginalGetComputedStyle(element, null);
}
catch (err) {
return orginalGetComputedStyle(document.getElementsByTagName("body")[0], null);
}
}
}

//wait for resizing to end before changing dimensions.
function onResize(){
if(tmrResize){
clearTimeout(tmrResize);
tmrResize = null;
}
console.log('Defering resize');
tmrResize = setTimeout(doResize, 50);
}

function onLoad(){

//Set report container dimentions
doResize();

//Attach event with "Show Report" button
var btnShowReport = document.getElementById('RvDetails_ctl04_ctl00');
if(btnShowReport){
console.log('Event Attached!');

if(window.addEventListener)
btnShowReport.addEventListener('click', onShowReportClick, false);
else
btnShowReport.onclick = onShowReportClick;
}
}

function doResize(){
console.log('Resizing!');
var mainContainer = document.getElementById('mainContainer');
if(mainContainer){
mainContainer.style.width = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) + "px";
mainContainer.style.height = ((window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight)) + "px";

$find("RvDetails").recalculateLayout();

//Specifically for IE11, Should be guareded with check specifically for IE11 only
applyPatchForIE11();

forceLayout();

console.log(mainContainer.style.width + " " + mainContainer.style.height);
}
}

function forceLayout(){
console.log('Trying to layout');
var win = $find("RvDetails");
console.log(win);
if(win){
var internalViewer = win._getInternalViewer();
console.log(internalViewer);
if(internalViewer){
var tmp = internalViewer._element.offsetHeight;
console.log(tmp);
}
}
}

if(window.addEventListener)
window.addEventListener('resize', onResize, false);
else
window.onresize = onResize;

function onShowReportClick(event){
setTimeout(function(){
$find("RvDetails").recalculateLayout();

//Specifically for IE11, Should be guareded with check specifically for IE11 only
applyPatchForIE11();

console.log('Layout done!');

}, 35000);

console.log('Timer Started');
}

//Specifically for IE11, Should be guareded with check specifically for IE11 only
function applyPatchForIE11(){
var internalReportDetailsSection = document.getElementById($find("RvDetails")._getInternalViewer().ReportAreaId);
if(internalReportDetailsSection){
var detailSectionParent = internalReportDetailsSection.parentNode;

if(detailSectionParent){
internalReportDetailsSection.style.height = detailSectionParent.offsetHeight + "px";

console.log("Parent Height = " + detailSectionParent.offsetHeight +
", Control Height = " + internalReportDetailsSection.offsetHeight);
}
}
}

</script>
</head>
<body style="width: 100%; height: 100%;overflow:hidden;" onload="onLoad()">
<div id="mainContainer" style="width: 100%; height: 100%;">
<form id="form1" runat="server" style="width: 100%; height: 100%;">
<asp:Label ID="MessageLabel" runat ="server" ></asp:Label>
<telerik:RadScriptManager runat="server" ID="sm" AsyncPostBackTimeout="0"></telerik:RadScriptManager>
<rsweb:ReportViewer ID="RvDetails"
runat="server" Font-Names="Verdana" Font-Size="8pt"
sizeReportToContent="false"
ShowBackButton="true"
ShowDocumentMapButton="true"
ShowCredentialPrompts="false"
ShowPageNavigationControls="true"
ShowToolBar="true"
ShowPrintButton="true"
ShowWaitControlCancelLink="true"
ShowReportBody="true"
ShowFindControls="true"
ShowZoomControl="true"
Width="100%"
Height="100%"
ProcessingMode="Remote"
WaitMessageFont-Names="Verdana"
WaitMessageFont-Size="14pt"
KeepSessionAlive="true"
BackColor="#DEE7F2"
BorderColor="#A4B7D8"
BorderStyle="Solid"
BorderWidth="1px"
InternalBorderColor="164, 183, 216"
SplitterBackColor="164, 183, 216"
ToolBarItemBorderColor="164, 183, 216"
LinkActiveHoverColor="51, 102, 204"
ASyncRendering="false">
</rsweb:ReportViewer>
</form>
</div>
</body>
</html>

Here is content of my page

Stef

commented on 16 May 2014, 11:11 AM

Hello Pooja,

The registered report viewer is not Telerik Reporting viewer:

<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken="" Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>

If you want to use Telerik Reporting, you need to have reports created with Telerik report designers and Telerik report viewers (ASP.NET ReportViewer or the HTML5 Report Viewer).

The viewer's size can be controlled via CSS attributes to the DIV element in which is rendered the content. For example take a look at this forum post that illustrates how to size the ASP.NET ReportViewer.

I hope this helps you.

Regards,
Stef
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

jguti

commented on 03 May 2018, 04:30 PM

not in chrome

jguti

commented on 03 May 2018, 04:30 PM

not run in chrome

jguti

commented on 03 May 2018, 04:32 PM

not functions

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

How to set ReportViewer height and width to 100%

1 Answer, 1 is accepted