Raj Bandi

Fixing SSRS Report Viewer control date picker in Google chrome

Categories: Uncategorized

Tags: JQuery, JScript, Reporting Services

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

11 Comments

  • Matt said

    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(&quot;,&quot;, ([b]GetDateParameters().ToList()[/b].ToArray())); } private IEnumerable[b]&lt;string&gt;[/b] GetDateParameters() { // I&#39;m assuming report view control id as reportViewer foreach (ReportParameterInfo info in ReportViewer1.ServerReport.GetParameters()) { if (info.DataType == ParameterDataType.DateTime) { yield return string.Format(&quot;[{0}]&quot;, 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.

  • dhana said

    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: &#39;/Reserved.ReportViewerWebControl.axd?OpType=Resource&amp;Name=Microsoft.Reporting.WebForms.calendar.gif&#39;

  • dhana said

    &lt;%@ Page Language=&quot;C#&quot; AutoEventWireup=&quot;true&quot; CodeBehind=&quot;Default.aspx.cs&quot; Inherits=&quot;Rpt._Default&quot; %&gt; &lt;%@ Register Assembly=&quot;Microsoft.ReportViewer.WebForms, Version=9.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a&quot; Namespace=&quot;Microsoft.Reporting.WebForms&quot; TagPrefix=&quot;rsweb&quot; %&gt; &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; &gt; &lt;head id=&quot;Head1&quot; runat=&quot;server&quot;&gt; &lt;title&gt;&lt;/title&gt; &lt;script language=&quot;javascript&quot; type =&quot;text/javascript&quot;&gt; $(document).ready(function () { debugger; if ($.browser.webkit) { $($(&quot;:hidden[id*=&#39;DatePickers&#39;]&quot;).val().split(&quot;,&quot;)).each(function (i, item) { var h = $(&quot;table[id*=&#39;ParametersGrid&#39;] span&quot;).filter(function (i) { var v = &quot;[&quot; + $(this).text() + &quot;]&quot;; return (v != null &amp;&amp; v.indexOf(item) &gt;= 0); }).parent(&quot;td&quot;).next(&quot;td&quot;).find(&quot;input&quot;).datepicker({ showOn: &quot;button&quot;, //buttonImage: &#39;/KeithWood-jQuery-Datepicker.gif&#39;, buttonImage:&#39;/Microsoft.Reporting.WebForms.calendar.gif&#39;, buttonImageOnly: true, dateFormat: &#39;mm/dd/yy&#39;, changeMonth: true, changeYear: true }); }); } }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form id=&quot;form1&quot; runat=&quot;server&quot;&gt; &lt;div style=&quot;margin:0 auto;&quot;&gt; &lt;rsweb:ReportViewer ID=&quot;Rptvwr&quot; runat=&quot;server&quot; Width=&quot;100%&quot; Height=&quot;700px&quot; AsyncRendering=&quot;False&quot; SizeToReportContent=&quot;True&quot;&gt; &lt;/rsweb:ReportViewer&gt; &lt;asp:HiddenField ID=&quot;DatePickers&quot; runat=&quot;server&quot; /&gt; &lt;/div&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; 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(&quot;http://192.168.100.7/ReportServer&quot;); Rptvwr.ServerReport.ReportPath = &quot;/AllReports/Open Stock&quot;; } catch (Exception ex) { Response.Write(ex.ToString()); } } protected override void OnPreRender(EventArgs e) { base.OnPreRender(e); DatePickers.Value = string.Join(&quot;,&quot;, (GetDateParameters().ToList().ToArray())); } private IEnumerable&lt;string&gt; GetDateParameters() { foreach (ReportParameterInfo info in Rptvwr.ServerReport.GetParameters()) { if (info.DataType == ParameterDataType.DateTime) { yield return string.Format(&quot;[{0}]&quot;, 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

  • sandy said

    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.

  • Cristian Rivera said

    If it doesn't work for you, it is probably because in the javascript the function is looking for <strong>$(":hidden[id*='DatePickers']")</strong> 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 <strong> ClientIDMode="Static"</strong> inside your @Page declaration at the top of the page.

  • Will said

    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.

  • Barry Bronstein said

    This works fine until I view report (with selected date) the report is shown, but the date is updated and the icon is missing again (after postback)

  • Eoin Butler said

    One suggestion for those of you who have attempted this fix and found it still not working. Run your application with the console in chrome and check to see if there is a problem with your application calling the .axd file More specifically ReportViewerWebControl.axd

Add a Comment