How to set ReportViewer height and width to 100%

19 posts, 0 answers
  1. Randall
    Randall avatar
    54 posts
    Member since:
    Jun 2008

    Posted 24 Oct 2008 Link to this post

    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
  2. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 27 Oct 2008 Link to this post

    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.
  3. DevCraft banner
  4. Randall
    Randall avatar
    54 posts
    Member since:
    Jun 2008

    Posted 27 Oct 2008 Link to this post

    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
  5. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 27 Oct 2008 Link to this post

    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.
  6. Chris Metz
    Chris Metz avatar
    6 posts
    Member since:
    May 2006

    Posted 07 Feb 2009 Link to this post

    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
  7. FT
    FT avatar
    3 posts
    Member since:
    Feb 2009

    Posted 09 Feb 2009 Link to this post

    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
  8. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 09 Feb 2009 Link to this post

    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.
  9. FT
    FT avatar
    3 posts
    Member since:
    Feb 2009

    Posted 09 Feb 2009 Link to this post

    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
  10. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 09 Feb 2009 Link to this post

    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.
  11. FT
    FT avatar
    3 posts
    Member since:
    Feb 2009

    Posted 09 Feb 2009 Link to this post

    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
  12. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 09 Feb 2009 Link to this post

    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.
  13. Randall
    Randall avatar
    54 posts
    Member since:
    Jun 2008

    Posted 09 Feb 2009 Link to this post

    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

  14. Jose
    Jose avatar
    49 posts
    Member since:
    Aug 2008

    Posted 21 Jul 2009 Link to this post

    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
  15. Jose
    Jose avatar
    49 posts
    Member since:
    Aug 2008

    Posted 21 Jul 2009 Link to this post

    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



  16. Phil
    Phil avatar
    84 posts
    Member since:
    Apr 2005

    Posted 20 Sep 2012 Link to this post

    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>

     

  17. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 21 Sep 2012 Link to this post

    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 >

  18. Phil
    Phil avatar
    84 posts
    Member since:
    Apr 2005

    Posted 24 Sep 2012 Link to this post

    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
  19. JanwalkarPooja
    JanwalkarPooja avatar
    20 posts
    Member since:
    Jan 2013

    Posted 14 May 2014 in reply to Steve Link to this post

    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


  20. Stef
    Admin
    Stef avatar
    3047 posts

    Posted 16 May 2014 Link to this post

    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.

     
Back to Top
DevCraft banner