How to set ReportViewer height and width to 100%

1 Answer 6757 Views
General Discussions
Randall
Top achievements
Rank 2
Randall asked on 24 Oct 2008, 04:18 PM
Hello,

I have Telerik Reporting v2.5.8.519 and have a ReportViewer on a SharePoint page.  I put this on using SharePoint Designer and it is working as it should.

The only problem I have is that I want to resize the ReportViewer to 100% of available space on the screen.  I can set the report height in pixels (i.e., Height="500px") which makes the ReportViewer 500 pixels high.  However, if I put in Height="100%" then the ReportViewer does NOT fill up the screen height.  It only fills up the <div> the ReportView control lives in.

How do I do this?

Thanks,

Randall Price

1 Answer, 1 is accepted

Sort by
0
Steve
Telerik team
answered on 27 Oct 2008, 10:20 AM
Hi Randall,

In order to have the Web ReportViewer display with 100% height in Internet Explorer, you would need to remove the VS default doctype (or use a less restrictive one) and apply height to the whole DOM tree:

<style type="text/css">   
  html#html, body#body, form#form1, div#content, center#center
  { 
   border: 0px solid black;
   padding: 0px;
   margin: 0px;
   height: 100%;
  }
</style>

This is required for IE only as other browsers handle this automatically.

All the best,
Steve
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Randall
Top achievements
Rank 2
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
Telerik team
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
Top achievements
Rank 1
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
FT
Top achievements
Rank 1
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
Telerik team
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.
FT
Top achievements
Rank 1
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
Telerik team
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.
FT
Top achievements
Rank 1
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
Telerik team
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
Top achievements
Rank 2
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
Top achievements
Rank 2
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
Top achievements
Rank 2
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
Top achievements
Rank 2
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">
<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
Telerik team
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
Top achievements
Rank 2
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
Top achievements
Rank 2
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
Telerik team
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
Top achievements
Rank 1
commented on 03 May 2018, 04:30 PM

not in  chrome
jguti
Top achievements
Rank 1
commented on 03 May 2018, 04:30 PM

not run in chrome
jguti
Top achievements
Rank 1
commented on 03 May 2018, 04:32 PM

not functions
Tags
General Discussions
Asked by
Randall
Top achievements
Rank 2
Answers by
Steve
Telerik team
Share this question
or