CODEWITHSUNDEEP
asp.netreportviewerrdlc
Dilip Suvagiya
Dilip Suvagiya

Reputation: 394

Issue Of Width In RDLC Report Display in ReportViewer

I have design a rdlc report in a4 size(8.5 x 11.0). When i display report into reportviewer it will not display properly in terms of width.

Below is the screenshot:

enter image description here

I also write few code for report viewer as under :

 <div id="dvRpt" runat="Server" style="overflow: auto; width: 100%; height: 440px">
   <rsweb:ReportViewer ID="ReportViewer1" ShowPrintButton="true" AsyncRendering="false" SizeToReportContent="true"  Width="93%" Height="400px" runat="server">
   </rsweb:ReportViewer>

Upvotes: 1

Views: 5507

Answers (5)

ciencia
ciencia

Reputation: 496

I had the same problem. It displays good in Mozilla Firefox but looks stretched on Google Chrome and modern versions of Internet Explorer.

Digging into the issue, I found that the contents of the report are inside a table cell with id oReportCell like this:

<div id="oReportDiv">
    <table>
        <tr>
            <td id="oReportCell"><!-- Report content goes here --></td>
            <td height="0" width="100%"><!-- Empty cell with problematic width --></td>
        </tr>
    </table>
</div>

The fix for me is to remove the width="100%" of that cell. That's a bit tricky, since the report is generated inside an iframe and in turn inside other frames. Forcing a width with CSS doesn't work.

I've created this piece of JavaScript that works on the page where the report viewer is generated. It needs to listen to load events of the frames for when you navigate through the pages of the report.

Replace the ID with your report viewer ID: 

(function() {
    var _init = function() {
        var reportControl, frameId, frame;
        reportControl = document.getElementById('ReportViewer1'); // ID of the ReportViewer control
        if (!reportControl || !reportControl.ClientController) return;
        frameId = reportControl.ClientController.m_docMapReportFrameID;
        if (!frameId) return;
        frame = document.getElementById(frameId);
        if (!frame || !frame.addEventListener) return;
        frame.addEventListener('load', (function(frame) {
            return function(e) {
                _reportFrameLoaded(frame);
            };
        })(frame), false);
    },
    _reportFrameLoaded = function(frame) {
        var innerDoc;
        innerDoc = frame.contentDocument;
        frame = innerDoc.getElementById('report');
        if (!frame) return;
        frame.addEventListener('load', (function(frame) {
            return function(e) {
                _innerReportFrameLoaded(frame);
            };
        })(frame), false);
        // If the frame already has content, it may be loaded before 
        // this load function has run. Call the child onload function now
        if (frame.contentDocument) {
            _innerReportFrameLoaded(frame);
        }
    },
    _innerReportFrameLoaded = function(frame) {
        var innerDoc, cell1;
        innerDoc = frame.contentDocument;
        cell1 = innerDoc.getElementById('oReportCell');
        if (!cell1) return;
        if (cell1.nextSibling.hasAttribute('width')) {
            cell1.nextSibling.removeAttribute('width');
        }
    };
    if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', _init, false);
    }
})();

Upvotes: 1

indianabeck
indianabeck

Reputation: 1

<rsweb:ReportViewer ID="ReportViewer1" runat="server" ProcessingMode="Remote" width="100%"></rsweb:ReportViewer>

This will do it.

Upvotes: 0

Gourav Sehgal
Gourav Sehgal

Reputation: 41

apply just this on your css

   <style>
         table{
        width:100%;
        }
    </style>

Upvotes: 0

Rageesh Geetha Raman
Rageesh Geetha Raman

Reputation: 1429

<form id="form1" runat="server" > 
<div style="Width:auto;">
   <rsweb:ReportViewer ID="rptViewer" runat="server" Width="100%" Height="100%" AsyncRendering="False" SizeToReportContent="True">
    </rsweb:ReportViewer>
</div>
</form

Upvotes: 0

Hardik Vinzava
Hardik Vinzava

Reputation: 988

make ReportViewer's width="100%" and try 

<div id="dvRpt" runat="Server" style="width: 100%; height: 440px">
   <rsweb:ReportViewer ID="ReportViewer1" ShowPrintButton="true" AsyncRendering="false" SizeToReportContent="true"  Width="100%" Height="400px" runat="server">
   </rsweb:ReportViewer>

Upvotes: 0

Related Questions