Print button and date picker in SSRS reports for non-IE browsers (Chrome, Firefox, etc.)

• Download source code - 8.32 KB

Introduction

SQL Server Reporting Services ReportViewer control has some limitations in non-IE browsers such as Chrome, Firefox, etc. Some of these limitations are:

• Print button is not visible.
• Date picker is not displayed as a date picker control.

This article will help you achieve the solution for the above limitations and design some complex reports.  

Background  

I have searched so many articles on the internet but could not find a better complete solution with the source code and I thought to share my experience with some of you experiencing the same issues in your reporting. I hope this article will help you and save some of your development time. 

I am very thankful to those techies who shared their experience along with the source on the web and helped me achieve this piece of work.  

Using the code 

Implementation of Print functionality

With this article we will achieve a solution to display a custom print button shown in the following figure on the Report Viewer toolbar:

We will use the image control as a print button and the image control will be generated dynamically at runtime on the client side (please create your own GIF or JPEG image to show the image).

I know most of you will not agree with this approach but after a long research of more than a week I have come to a conclusion of implementing this functionality through AJAX calls to the server. This solution will create a temporary session PDF file and print the document at the client side and then delete the file on the server. Please follow these steps for the implementation (please make sure to have the user permissions on the server for creating/deleting the files).

Design of the ASPX page

1. Place your ReportViewer control on the ASPX page:
ASP.NET

<rsweb:ReportViewer ID="rvREXReport" runat="server" Width="100%" Height="798px"
Style="display: table !important; margin: 0px; overflow: auto !important;" 
ShowBackButton="true" onreportrefresh="rrvREXReport_ReportRefresh">
</rsweb:ReportViewer>   

2. Place a server side iFrame below the ReportViewer:
ASP.NET

<iframe id="frmPrint" name="frmPrint" runat="server" style = "display:none"></iframe>

3. Place the following div tag below the iframe declaration (this is to display the message while processing the AJAX request of printing):
ASP.NET

<div id="spinner" class="spinner" style="display:none;">
<table align="center" valign="middle" style="height:100%;width:100%">
<tr>
<td><img id="img-spinner" src="../Images/ajax-loader.gif" alt="Printing"/></td>
<td><span style="font-family:Verdana; font-weight:bold;font-size:10pt;width:86px;">Printing...</span></td>
</tr>
</table>
</div>

4. Place the ScriptManager:
ASP.NET

<asp:ScriptManager ID="ScriptManager1"  EnablePageMethods="true" 
    EnablePartialRendering="true" runat="server">
</asp:ScriptManager>

5. CSS classes are used to highlight the print button when the mouse is hovered on the print button (these CSS classes are available in the attached ASPX page).

Implementation of the client side script (jQuery/JavaScript)

To show the print button we will create a client side method that will generate the print and close buttons at runtime (please make sure to have the JPG/GIF images ready before you start the implementation). This method will be called on the body load event as well as report refresh event (at server side). Here is the explanation of how this has been implemented:

1. We will have to find where the refresh button is available in the HTML code of the ReportViewer control.
2. Once the refresh button is found from the above step, we will have to find the parent of the refresh button to add the image control.

Following is the method that will be used to create the print and close buttons:

function showPrintButton() {    
var table = $("table[title='Refresh']");
var parentTable = $(table).parents('table');
 ......remaining code here......

}

Tip: Install the developer tool on your machine to understand the HTML code which is generated on placing the ReportViewer control in the ASPX page.

Here we have two different client side methods which will be called before printing the report and after printing the report:

1.  Before the printing method is used to send an AJAX request to the server, create a PDF at server and assign to the iframe at server side.
JavaScript

function ServerCallBeforePrint(btn) {
 $('#spinner').show();
 var context = new Object(); 
 ......remaining code here......
}

2. After printing method is used to send an AJAX request to the server, for deleting the PDF file which was created in the above step.
JavaScript

function ServerCallAfterPrint(btn) {
    var context = new Object();
    ......remaining code here......  

}

Tip: The attached ASPX page contains the full implementation of these methods.

Implementation of displaying jQuery datepicker

To implement this functionality, I have created a client side method which will be called on the document ready event. Following is the method used to display the jQuery datepicker:

function showDatePicker() {
   var parameterRow = $("#ParametersRowrvREXReport");
   ....remaining code here....
}

Please do not use exactly the same code as above because your parameter row ID might be different from the row ID in the above code. 

The following statements will explain how the parameter row ID is generated:

"ParametersRowrvREXReport" is the ID of the parameters row which can be identified from your HTML code generated by the ReportViewer control (as mentioned above, you would need to install the developer tool which is a freeware).

In the parameter row ID, the first part of the name is the common "ParametersRow (your ReportViewer name)" and the rest of the name is suffixed with your ReportViewer name. In the above example my ReportViewer name is "rvREXReport" which is why the name of the parameter row ID is generated as "ParametersRowrvREXReport".

And also, to find the date picker control (which is displayed as a texbox in Chrome/Firefox), I have used the label to find the table cell and from there I could identify the date control. Please note that we cannot rely on the name of the textbox as this will be generated at runtime and could be different. This is the reason I am using a label to find the date control on the report.

Tip: To use the above code, please make sure to use the date parameter in your report.

I have attached a sample project which contains the source with this article. Please note that this attachment will not contain the RDL file.

The attached project contains runnable files but will not contain support jQuery files (jquery-1.4.1.js, jquery-1.4.1.min.js, jquery-1.4.1-vsdoc.js) and the corresponding images. The attached project contains the proper structure to place all your files. I have tested this code properly in Google Chrome for my project and I hope this article will help you with all your needs to print the report in non-IE browsers and also display the jQuery datepicker control.  

Note: I have not included the SSRS report in the attached project. There are some configuration settings applied in the web.config file under the appSettings section. Please change those setting according to your needs. For your reference, I have attached a web.config file in the attached project.

What does the project contain?

1. An ASPX page that implements the logic of displaying the print button and date picker control in the SSRS report viewer.
2. ReportViewerCredentials.cs in the App_Code folder which is used to supply to the report the credentials to execute the report from the ASPX page.  
3. A Web.config file which contains additional application settings in the appSettings section. 

Final Tips

1. Keep the images under the "Images"  folder. Place your own "ajax-loader.gif" in this folder.
2. Make sure all the default jQuery files (jquery-1.4.1.js, jquery-1.4.1.min.js, jquery-1.4.1-vsdoc.js) are under the scripts folder.
3. Keep ReportViewerCredentials.cs under the App_Code folder of the project.
4. Make sure to have permissions on the server to create and delete files.
5. It is mandatory to have references to the following .NET libraries in the project:
• Microsoft.Build.Framework
• Microsoft.ReportViewer.Common
• Microsoft.ReportViewer.WebForms
• System.Management 

****If you like this article, please leave your comments/suggestions and rating.

History

If there are any further updates, they will be released in the next version.