Invoking the Print dialog for report viewer 2010 control using the JavaScript API

 

Have you tried the new JavaScript libraries exposed by Report viewer 2010 control? Please go through Brian’s blog on JavaScript API and the MSDN documentation on the same.

Ok, now lets see how we can leverage one of the methods to invoke the Print dialog for Report viewer.

We’re going to make use of Microsoft.Reporting.WebFormsClient.ReportViewer.invokePrintDialog Method.

Create a new ASP.NET project in VS 2010 (If you’re using VS 2008 and still want to use RV 2010 , then you need to the change the references accordingly apart from adding the Scriptmanager to the page) and drag and drop a Report Viewer 2010 control in an ASP.NET page (Named ReportViewer1 in our sample).

Set the properties like, Processing mode (Local or Remote), ReportServerURL (Incase of Remote processing mode) and the Report path.

Then switch back to the design view and get in to the HTML view.

Here is the piece of javascript you need to use to complete this exercise. This needs to be put in immediately next to the close of the </form> tag.

<script language="javascript">
function PrintReport() {
var viewerReference = $find("ReportViewer1");

             var stillonLoadState = viewerReference.get_isLoading();

             if (!stillonLoadState ) {
var reportArea = viewerReference .get_reportAreaContentType();
if (reportArea == Microsoft.Reporting.WebFormsClient.ReportAreaContent.ReportPage) {
$find("ReportViewer1").invokePrintDialog();
}
}
}
</script>

Lets see what the above function mean to you and me.

The ReportViewer client side object inherits from Sys.UI.Control. To obtain a reference to the client side viewer, use the $find method as follows:

var viewerReference = $find("ReportViewer1");

The identifier you pass to $find corresponds to the ClientID of the ReportViewer server control.

Now having the reference for the client side viewer, you will want to check the state of the viewer before invoking most of the various methods and properties it exposes. When the viewer is in a loading state, most of the functionality of the client viewer is unavailable and will throw an exception if called. So you got to be extra careful here.

The viewer is loading whenever an asynchronous postback is in progress. It is also in the loading state while retrieving a report page. This usually happens during an asynchronous postback, but can also extend beyond the lifetime of the postback, such as while retrieving images displayed on the report page. To check the state of the viewer, use the isLoading property:

var stillonLoadState = viewerReference .get_isLoading();

Once you have determined that the viewer is no longer loading new data, you can determine what is being displayed using the reportAreaContentType property. It will indicate if the viewer is blank, displaying a report, or displaying an error message:

 

if (!stillonLoadState ) {
var reportArea = viewerReference.get_reportAreaContentType();
if (reportArea == Microsoft.Reporting.WebFormsClient.ReportAreaContent.ReportPage) {
$find("ReportViewer1").invokePrintDialog(); // Perform any operation as per your requirement.
}
}

Finally all you got to do is, put a HTML button on the page named Print and call the PrintReport function (defined in the above javascript) for button’s onClick event.

<input id="Button1" type="button" value="Print Report" onclick="PrintReport();"/>

Now the obvious question that comes is, The Report viewer tool already provides the out of the box print functionality. Then when should I go for the Microsoft.Reporting.WebFormsClient.ReportViewer.invokePrintDialog Method?

1. You want to disable the toolbar for some reason and still want provide Print functionality.

2. You do not want to show the report viewer control itself to the end user, but just provide a link to Print the report directly.

#1 can be easily done by just changing the ShowToolBar property to False.

But implementing #2 will be little tricky. The reason is, the moment you change the visibility of the report viewer control to hidden, the $find method will return NULL, which eventually make the the rest of our operation to fail. But this can be accomplished in a little tricky way and in multiple steps.

1. Turn off the tool bar by changing the ShowToolBar property to False.

2. Then change the Height and Width property of the control to 0.

This will leave the report viewer dis appear at runtime.

But whenever the report viewer loads the report you’ll still get the small animation. If you’re fine with just showing that then it’s ok.

Otherwise you might need to turn off AsyncRendering of the report viewer by changing the AsyncRendering="false".

The below piece of block summarizes what we just discussed.

<rsweb:ReportViewer ID="ReportViewer1" runat="server" Font-Names="Verdana"
Font-Size="8pt" Height="0px" ProcessingMode="Remote" Width="0px" ShowToolBar="false" AsyncRendering="false">
<ServerReport ReportPath="/Somereport"
ReportServerUrl=https://servername/reportserver />
</rsweb:ReportViewer>

Happy programming using Report viewer 2010 control.

HTH!

Selva.

[All the posts are AS-IS and doesn’t carry any warranty]

Comments

• Anonymous
  March 11, 2012
  can we replace page navigation using javascript API

• Anonymous
  March 12, 2012
  The comment has been removed

• Anonymous
  August 01, 2012
  Can i still have the showtoolbar true with showprintbutton false and have javascript print dialog

• Anonymous
  August 20, 2012
  @Sai,     Yes, you can have the ReportViewer print button to be hidden and still you can implement the method discussed in this blog to print the reports.

• Anonymous
  October 02, 2012
  Will this solution work in Firefox (a non-ActiveX browser)

• Anonymous
  October 02, 2012
  RsClient print is completely dependent on Active-X controls and hence this solution will not be helpful on browsers that doesn't support active-x.

• Anonymous
  January 28, 2014
  Helped me a lot. Great work!