Sowiarz Sowiarz - 4 months ago 169
C# Question

How to display reports (Html.ReportViewer) properly in bootstrap?

I have a following problem. I want to create 3x3 table(or view) with

@Html.ReportViewer
inside. I want to display all of report without a scrolls.

I have following code in my controller:

ReportViewer rptViewer = new ReportViewer();

rptViewer.ProcessingMode = ProcessingMode.Remote;
rptViewer.SizeToReportContent = true;
rptViewer.ZoomMode = ZoomMode.FullPage;

rptViewer.AsyncRendering = false;

//Dodatki okna:
rptViewer.ShowBackButton = false;
rptViewer.ShowExportControls = false;
rptViewer.ShowFindControls = false;
rptViewer.ShowPageNavigationControls = false;
rptViewer.ShowPrintButton = false;
rptViewer.ShowRefreshButton = false;
rptViewer.ShowZoomControl = false;

rptViewer.ServerReport.ReportServerUrl = new Uri("MyServerAddress");
rptViewer.ServerReport.ReportPath = "MyReportPath";

rptViewer.ServerReport.ReportServerCredentials = new ReportViewerCredentials("MyCredentials");


ViewBag.ReportViewer = rptViewer;
return View();


And this is my view code and view as I see:
enter image description here

<div class="row">
<div class="col-md-4">
@Html.ReportViewer(ViewBag.ReportViewer as Microsoft.Reporting.WebForms.ReportViewer)
</div>
<div class="col-md-4">
@Html.ReportViewer(ViewBag.ReportViewer as Microsoft.Reporting.WebForms.ReportViewer)
</div>
<div class="col-md-4">
@Html.ReportViewer(ViewBag.ReportViewer as Microsoft.Reporting.WebForms.ReportViewer)
</div>
</div>

<div class="row">
<div class="col-md-4">
@Html.ReportViewer(ViewBag.ReportViewer as Microsoft.Reporting.WebForms.ReportViewer)
</div>
<div class="col-md-4">
@Html.ReportViewer(ViewBag.ReportViewer as Microsoft.Reporting.WebForms.ReportViewer)
</div>
<div class="col-md-4">
@Html.ReportViewer(ViewBag.ReportViewer as Microsoft.Reporting.WebForms.ReportViewer)
</div>
</div>

<div class="row">
<div class="col-md-4">
@Html.ReportViewer(ViewBag.ReportViewer as Microsoft.Reporting.WebForms.ReportViewer)
</div>
<div class="col-md-4">
@Html.ReportViewer(ViewBag.ReportViewer as Microsoft.Reporting.WebForms.ReportViewer)
</div>
<div class="col-md-4">
@Html.ReportViewer(ViewBag.ReportViewer as Microsoft.Reporting.WebForms.ReportViewer)
</div>
</div>


Only the last element is without scrolls. The rest are a small windows with scrolls. How to fix this situation? Can I do a nice view with ReportViewer elements?

Answer

I have added a following code into my view it solved a problem:

<div class="col-md-4">
        @Html.ReportViewer(ViewBag.ReportViewer as Microsoft.Reporting.WebForms.ReportViewer, new { frameborder = "0", width = "500", height = "500", style = "overflow:hidden;", scrolling = "no" })
</div>
<div class="col-md-4">
        @Html.ReportViewer(ViewBag.ReportViewer1 as Microsoft.Reporting.WebForms.ReportViewer, new { frameborder = "0", width = "500", height = "500", style = "overflow:hidden;", scrolling = "no" })
</div>
<div class="col-md-4">
        @Html.ReportViewer(ViewBag.ReportViewer as Microsoft.Reporting.WebForms.ReportViewer, new { frameborder = "0", width = "500", height = "500", style = "overflow:hidden;", scrolling = "no" })
</div>