SQL Reporting Services viewer for webpage - can you move the View Report button?

G

6

Using the viewer control for display of SQL Reporting Services reports on web page (Microsoft.ReportViewer.WebForms), can you move the View Report button? It defaults to the very right side of the report, which means you have to scroll all the way across before the button is visible. Not a problem for reports that fit the window width, but on very wide reports that is quickly an issue.

Granulite answered 21/8, 2008 at 18:42 Comment(0)

H

2

It's kind of a hack, but you can move it in JavaScript. Just see what HTML the ReportViewer generates, and write the appropriate JavaScript code to move the button. I used JavaScript to hide the button (because we wanted our own View Report button). Any JavaScript code that manipulates the generated ReportViewer's HTML must come after the ReportViewer control in the .aspx page. Here's my code for hiding the button, to give you an idea of what you'd do:

function getRepViewBtn() {
  return document.getElementsByName("ReportViewer1$ctl00$ctl00")[0];
}

function hideViewReportButton() { // call this where needed
  var btn = getRepViewBtn();
  btn.style.display = 'none';
}

Husch answered 20/5, 2009 at 4:37 Comment(0)

C

3

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

However, you could create your own custom report viewing control. The control would be comprised of fields for report parameters and a button to generate the report. When a user clicks the button you could generate the report in the background. You could display the report as a PDF, HTML, etc.

Cloistered answered 21/8, 2008 at 18:54 Comment(2)

@Cowthulhu Notice how I said “in the ReportViewer control”. I still think this is a valid answer since the ability to hide the button is not built in. The only way around it is to manipulate the button outside of the control on the page using JavaScript as stated in the accepted answer above. – Cloistered 24/10, 2017 at 2:25

You're right, sorry about that. I've deleted my comment. – Decanter 9/1, 2018 at 15:52

H

2

It's kind of a hack, but you can move it in JavaScript. Just see what HTML the ReportViewer generates, and write the appropriate JavaScript code to move the button. I used JavaScript to hide the button (because we wanted our own View Report button). Any JavaScript code that manipulates the generated ReportViewer's HTML must come after the ReportViewer control in the .aspx page. Here's my code for hiding the button, to give you an idea of what you'd do:

function getRepViewBtn() {
  return document.getElementsByName("ReportViewer1$ctl00$ctl00")[0];
}

function hideViewReportButton() { // call this where needed
  var btn = getRepViewBtn();
  btn.style.display = 'none';
}

Husch answered 20/5, 2009 at 4:37 Comment(0)

U

2

The reason the button is pushed over to the right is that the td for the parameters has width="100%". I'm solving this problem with the following jquery. It simply changes the width of the parameters td to 1. Browsers will expand the width on their own to the width of the contents of the element. Hope this helps.

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

Uncrown answered 3/12, 2009 at 22:44 Comment(0)

H

1

Since I was searching for this answer just yesterday, I thought I'd post what I came up with to solve our problem. Our reports were coming back wide, and we wanted the "view reports" button to exist on the left side of the control so there was no need to scroll to get to the button. I did need to go into the source of the rendered file to find the ID names of the button and the target table.

I wrote a simple cut and paste javascript function to pull the button from its original position and essentially drop it into the next row in the containing table below the date pickers.

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

This function gets called on the report viewer load 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;
}

Hone answered 2/12, 2014 at 19:56 Comment(0)

K

0

I had the same problem and ended up using an extension on Travis Collins answer; As well as changing the table column width I also align the "View Report" button left so that it appears neearer to rest of the controls.

    <script type="text/javascript">
  $(document).ready(function() {
     $("#_ctl0_MainContent_reportViewer_fixedTable tr:first td:first-child").attr("width", "1"); 
     $("#_ctl0_MainContent_reportViewer_fixedTable tr:first td:last-child").attr("align", "left");   
  });
</script>

You may need to tweak the JQuery selector depending on the element naming assigned to your existing control.

Kenton answered 15/10, 2018 at 9:46 Comment(2)

This works when the page is loading for the first time. After I click View Report, the data is loaded - but the styles are again reset to initial values (width '100%' and align 'center'). Any idea what could be wrong in my case? Appreciate your response. Thanks! – Hoffer 4/6, 2019 at 19:42

@NeelimaEdiga I am not able to validate this but try adding the jquery document change function, with the same 2 code lines to change the table layout, like this: $(document).on('change', 'input', function() { $("#_ctl0_MainContent_reportViewer_fixedTable tr:first td:first-child").attr("width", "1"); $("#_ctl0_MainContent_reportViewer_fixedTable tr:first td:last-child").attr("align", "left"); }); – Kenton 6/1, 2021 at 14:31

S

0

  #ParameterTable_ReportViewer1_ctl08{
        width:max-content !important;
    }

I solved the problem directly with CSS without writing Javascript. As soon as the parameters are completed, the button will appear.

Stringent answered 21/5 at 11:12 Comment(0)

Recommended topics

Hot tags