SQL Report Viewer for Web Page - Can you move the View Report button?

Question

Using the viewer to display SQL Reporting Services reports on a web page (Microsoft.ReportViewer.WebForms), can you move the View Report button? By default, it refers to the right-most part of the report, which means that you need to scroll all the way until the button is visible. Not a problem for reports that fit the width of the window, but for very wide reports that arise quickly.

Answer 1

This is a kind of hack, but you can move it to JavaScript. Just look at the HTML that ReportViewer generates and write the appropriate JavaScript code to move the button. I used JavaScript to hide the button (because we need our View Report button). Any JavaScript code that processes the generated ReportViewer HTML report should appear after the ReportViewer control on the .aspx page. Here is my code to hide the button to give you an idea of ​​what you will do:

function getRepViewBtn() { return document.getElementsByName("ReportViewer1$ctl00$ctl00")[0]; } function hideViewReportButton() { // call this where needed var btn = getRepViewBtn(); btn.style.display = 'none'; } 

Answer 2

No, you cannot move the view report button in the ReportViewer control.

However, you can create your own custom control for viewing reports. The control will consist of fields for the report parameters and buttons for creating the report. When the user clicks the button, you can generate a report in the background. You can display the report as PDF, HTML, etc.

Answer 3

The reason the button is pressed on the right is because td for the parameters has a width = "100%". I solve this problem with the following jquery. It just changes the width of the td parameters to 1. Browsers will expand the width on their own to the width of the content of the element. Hope this helps.

 <script type="text/javascript"> $(document).ready(function() { $("#<%= ReportViewer1.ClientID %> td:first").attr("width", "1"); }); </script> 

Answer 4

Since I only searched for this answer yesterday, I thought I would post what I came up with to solve our problem. Our reports came back widely, and we wanted the "View Reports" button to exist on the left side of the control, so there is no need to scroll it to go to the button. I needed to go into the source rendering file to find the id of the button and the target table.

I wrote a simple javascript function to cut and paste to pull a button out of its original position and essentially move it to the next row in the table below the date picker.

 function moveButton() { document.getElementById('ParameterTable_ctl00_MainContent_MyReports_ctl04').appendChild(document.getElementById('ctl00_MainContent_MyReports_ctl04_ctl00')); } 

This function is called in the report viewer download event.

 ScriptManager.RegisterStartupScript(Me, Me.GetType(), "moveButton", "moveButton();", True) 

To adjust the position, I used the CSS id.

 #ctl00_MainContent_MyReports_ctl04_ctl00 { margin: 0px 0px 0px 50px; }