Fixing SSRS Report Viewer control date picker in Google chrome

By | April 3, 2012

SSRS Report Viewer control works well in IE6+ but has some known compatibility issues with other major browsers(Firefox, Chrome etc.) around date picker and print button.

For more information read this

http://msdn.microsoft.com/en-us/library/ms251673.aspx

I am presenting a simple solution to fix date picker issue in Chrome with  a combination of some server side code and Client side JQuery script.

 

Server Side Code

 

1) Add the below code in the page/control file in which the reportviewer control resides

 <asp:HiddenField ID="DatePickers" runat="server" />

 

2) Add the below code in the code behind file of page/control in which the reportviewer control resides(.Net 2.0 version)


protected override void OnPreRender(EventArgs e)
{
  base.OnPreRender(e);
  DatePickers.Value = string.Join(",",(new List(GetDateParameters()).ToArray()));
}
private IEnumerable GetDateParameters()
{
  // I'm assuming report view control id as reportViewer
  foreach (ReportParameterInfo info in reportViewer.ServerReport.GetParameters())
  {
    if (info.DataType == ParameterDataType.DateTime)
    {
        yield return string.Format("[{0}]",info.Prompt);
    }
  }
}

 

Client Side Code

 

1) Add the below script in the html head section


$(document).ready(function(){

 if ($.browser.webkit)
 {
    $($(":hidden[id*='DatePickers']").val().split(",")).each(function(i, item){
         var h = $("table[id*='ParametersGrid'] span").filter(function(i) {
             var v = "[" + $(this).text() + "]";
             return (v != null && v.indexOf(item) >= 0);
          }).parent("td").next("td").find("input").datepicker({
           showOn: "button"
           ,buttonImage: '/Reserved.ReportViewerWebControl.axd?OpType=Resource&Name=Microsoft.Reporting.WebForms.calendar.gif'
           ,buttonImageOnly: true
           ,dateFormat: 'dd/mm/yy'
           ,changeMonth: true
           ,changeYear: true
           });
     });
  }

});

 

Hope this helps!!! Smile

8 thoughts on “Fixing SSRS Report Viewer control date picker in Google chrome

  1. Matt

    I am using this method in Visual Studio 2010 and have updated the server code to the following:

    [quote]
    protected override void OnPreRender(EventArgs e)
    {
    base.OnPreRender(e);
    DatePickers.Value = string.Join(",", ([b]GetDateParameters().ToList()[/b].ToArray()));
    }

    private IEnumerable[b]<string>[/b] GetDateParameters()
    {
    // I'm assuming report view control id as reportViewer
    foreach (ReportParameterInfo info in ReportViewer1.ServerReport.GetParameters())
    {
    if (info.DataType == ParameterDataType.DateTime)
    {
    yield return string.Format("[{0}]", info.Prompt);
    }
    }
    }
    [/quote]

    Note: Once you set your parameters and run the report, the date pickers go away. If I find a solution I will post it.

    Reply
    1. Will

      I am having the same issue. Were you able to figure out a solution?

      Reply
      1. Will

        Found the solution. We need to make sure that datepicker is displayed after an asyn postback
        by specifying an event handler for handling async postback

        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(evenHandler);

        function eventHandler() {
        // codes that display the datepicker
        }

        Hope this helps.

        Reply
  2. dhana

    This is not working for me.
    so do i have to change this line to make that application to work?
    I have created KeithWood-jQuery-Datepicker.gif is added in my application.

    ,buttonImage: '/Reserved.ReportViewerWebControl.axd?OpType=Resource&Name=Microsoft.Reporting.WebForms.calendar.gif'

    Reply
  3. dhana

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Rpt._Default" %>

    <%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=9.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"
    Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

    <html xmlns="http://www.w3.org/1999/xhtml&quot; >
    <head id="Head1" runat="server">
    <title></title>
    <script language="javascript" type ="text/javascript">
    $(document).ready(function () {
    debugger;

    if ($.browser.webkit) {
    $($(":hidden[id*='DatePickers']").val().split(",")).each(function (i, item) {
    var h = $("table[id*='ParametersGrid'] span").filter(function (i) {
    var v = "[" + $(this).text() + "]";
    return (v != null && v.indexOf(item) >= 0);
    }).parent("td").next("td").find("input").datepicker({ showOn: "button",

    //buttonImage: '/KeithWood-jQuery-Datepicker.gif',
    buttonImage:'/Microsoft.Reporting.WebForms.calendar.gif',
    buttonImageOnly: true,
    dateFormat: 'mm/dd/yy',
    changeMonth: true,
    changeYear: true
    });
    });
    }

    });

    </script>

    </head>
    <body>
    <form id="form1" runat="server">
    <div style="margin:0 auto;">
    <rsweb:ReportViewer ID="Rptvwr" runat="server" Width="100%" Height="700px" AsyncRendering="False" SizeToReportContent="True">

    </rsweb:ReportViewer>
    <asp:HiddenField ID="DatePickers" runat="server" />
    </div>
    </form>
    </body>
    </html>
    this will be my aspx page,
    and

    using System;
    using System.Collections;
    using System.Text;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Microsoft.Reporting.WebForms;

    namespace Rpt
    {
    public partial class _Default : System.Web.UI.Page
    {
    protected void Page_Load(object sender, EventArgs e)
    {
    try
    {
    Rptvwr.ProcessingMode = ProcessingMode.Remote;
    Rptvwr.ServerReport.ReportServerUrl = new Uri("http://192.168.100.7/ReportServer&quot;);
    Rptvwr.ServerReport.ReportPath = "/AllReports/Open Stock";

    }
    catch (Exception ex)
    {
    Response.Write(ex.ToString());
    }
    }
    protected override void OnPreRender(EventArgs e)
    {
    base.OnPreRender(e);
    DatePickers.Value = string.Join(",", (GetDateParameters().ToList().ToArray()));
    }
    private IEnumerable<string> GetDateParameters()
    {

    foreach (ReportParameterInfo info in Rptvwr.ServerReport.GetParameters())
    {
    if (info.DataType == ParameterDataType.DateTime)
    {
    yield return string.Format("[{0}]", info.Prompt);
    }
    }
    }

    }
    }
    be my code behind.
    It was not working for me and
    I have changed KeithWood-jQuery-Datepicker.gif in that jquery. still it is not working. kindly tel me where do i have to change to get datepicker in chrome

    Reply
  4. sandy

    hi,
    The solution given above does not working at all. I am using vs2010 and SSRS 2008 R2 but in chrome the date picker calender part is not showing.

    Reply
  5. Cristian Rivera

    If it doesn’t work for you, it is probably because in the javascript the function is looking for $(“:hidden[id*='DatePickers']“)
    without taking care of asp.net tendency to ‘rename’ control Ids, so it is possible the hiddenfield “DatePickers” (and for that matter Any control within the page) has a slightly different Id than the one in the jquery lookups..
    to fix this, place a ClientIDMode=”Static” inside your @Page declaration at the top of the page.

    Reply
  6. Cristian Rivera

    I guess Raj did take care of those Ids by using “Id*=” !
    oh well, would hurt to try that anyways…

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *