Print button & Date picker in SSRS Reports for Non IE Browsers(Chrome,FF,etc.)

Introduction

SQL Server Reporting Services report viewer control have some limitations in non IE browsers such as chrome,Fireforx,etc. Some of limitations are

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

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

Using the code 

Implementation of Print functionality

With this article we will achieve the solution to display the custom print button shown in the following figure on the report viewer toolbar.


We will use the image control as 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 server. This solution will create temporary session pdf file and prints the document at client side and then deletes 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 ASPX page:
1. Place your report viewer control on the aspx page

<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 an server side iframe below the report viewer

<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). 

<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 script manager

<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 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 report viewer 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 button
function showPrintButton() {   
    var table = $("table[title='Refresh']");
    var parentTable = $(table).parents('table');
     ......remaining code here......

    }
  
Tips: Install the developer tool on your machine to understand the html code which is generatedon placing the report viewer control in aspx page.

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

a) Before printing method is used to send a ajax request to the server and create a pdf at server and assign to the iframe at server side.
<span class="Apple-style-span">function ServerCallBeforePrint(btn) {
     $('#spinner').show();
     var context = new Object();
</span>     ......remaining code here......<span class="Apple-style-span">       
    }  </span>
b) After printing method is used to send a ajax request to the server for deleting the pdf file which was created in the above step.
function ServerCallAfterPrint(btn) {
        var context = new Object();
        ......remaining code here...... 

    }

Tips: 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 document ready event. Following is the method used to display the jquery datepicker
function showDatePicker() {
       var parameterRow = $("#ParametersRowrvREXReport");
       ....remaining code here....
    }
Please donot use exactly the same code as above because your parameter row id might be different from the row id in the above code.

Following statements will explain you 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 report viewer control( As mentioned above, you would need to install developer tool which is a freeware).

In the parameter row id, first part of the name is common "ParametersRow(your report viewer name)" and rest of the name is suffixed with your report viewer name. In the above example my report viewer 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 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 label to find the date control on the report.
Tips: To use 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 jquery datepicker control. 
Note: I have not included the ssrs report in the attached project. There are some configuration settings applied in web.config file under "appSettings" section. Please change those setting according to your needs.  For your reference, I have attached web.config file in the attached project.

What does the project contains?  

1.  An aspx page that implements the logic of displaying the print button and date picker control in ssrs report viewer.

2. ReportViewerCredentials.cs in the App_Code folder which is used to supply the report the credentials to execute the report from aspx page. 
3. Web.config file which contains additional application settings in "appSettings" section.
Final Tips:
1. Keep the images under "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) under scripts folder.
3. Keep ReportViewerCredentials.cs under App_Code folder of the project.
4. Make sure to have the permissions on the server to create and delete the files.
5. It is mandatory to have references of the following .NET libraries in project 

• Microsoft.Build.Framework
• Microsoft.ReportViewer.Common
• Microsoft.ReportViewer.WebForms
• System.Management