CODEWITHSUNDEEP
c#asp.net-mvc-4reportviewer
Jiju John
Jiju John

Reputation: 821

How to set width for ReportViewer for MVC

I am using ReportViewer for MVC to display a report in a view in my MVC application.
How do I set width for this control?

I have set the width to 100%, but it is not working, as can be seen in this screenshot.

image width

In my view I use:

<div>
    @Html.ReportViewer(ViewBag.ReportViewer as Microsoft.Reporting.WebForms.ReportViewer, new { scrolling = "yes", width = "100%" })
</div>

And the the aspx page is:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body style="margin: 0px; padding: 0px;width:100%;">
<form id="form1" runat="server">
<div  style="width:100%">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="ReportViewerForMvc"     Name="ReportViewerForMvc.Scripts.PostMessage.js" />
</Scripts>
</asp:ScriptManager>
<rsweb:ReportViewer ID="ReportViewer1" runat="server" Width="100%"  Height="600px"></rsweb:ReportViewer>
</div>
</form>
</body>

Upvotes: 10

Views: 20240

Answers (3)

Surachit Pattanodom
Surachit Pattanodom

Reputation: 1

@Html.ReportViewer(
     ViewBag.ReportViewer as Microsoft.Reporting.WebForms.ReportViewer,new { @width="100%"})

Upvotes: 0

user3590235
user3590235

Reputation: 173

Note: i am using ReportViewerForMvc from nuget

I found that I need to attack the width/height issue in two fronts - I added a CSS to modify the iframe in ReportViewerWebForm.aspx when it's loaded.

iframe {
  /*for the report viewer*/
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

The rest would be the same as the accepted answer except I removed

reportViewer.SizeToReportContent = True

from my controller because it hides the scroll bar which I need for the wider reports I render in the same Report.cshtml which is

@using ReportViewerForMvc; @{ ViewBag.Title = " Report"; }

<h2>Simple Report </h2>

@Html.ReportViewer(ViewBag.ReportViewer as Microsoft.Reporting.WebForms.ReportViewer)

My Controller:

 > 

 public ActionResult ReportByType()
        {
            var data =SomeFunction.CreateDataTable(GetReportDataFromDB());

            ReportViewer reportViewer = new ReportViewer();
            reportViewer.ProcessingMode = ProcessingMode.Local;

            reportViewer.LocalReport.ReportPath = 
              Request.MapPath(Request.ApplicationPath) + 
                   @"Views\Reports\ReportByType.rdlc";
            reportViewer.LocalReport.DataSources.Add(new 
               ReportDataSource("DataSet1", data));
           // reportViewer.SizeToReportContent = true; ---hides the scrollbar which i need
            reportViewer.Width = Unit.Percentage(100);
            reportViewer.Height = Unit.Percentage(100);

            ViewBag.ReportViewer = reportViewer;
            return PartialView("Report");

        }


        enter code here

Upvotes: 4

Sirojan Gnanaretnam
Sirojan Gnanaretnam

Reputation: 611

try to write the below code in your Controller

using System.Web.UI.WebControls;

  ReportViewer reportViewer = new ReportViewer();
  reportViewer.ProcessingMode = ProcessingMode.Local;
  reportViewer.SizeToReportContent = true;
  reportViewer.Width = Unit.Percentage(100);
  reportViewer.Height = Unit.Percentage(100);

Upvotes: 14

Related Questions