Date Picker has no style

[Ed Lance]

With the ASP.Net report viewer, the date picker for a date parameter has no styles, it's just using the ugly default browser fonts.  I tried setting the skin of the reportviewer control, but didn't affect it.  Is this a bug?  Seems like it should look exactly the same as the RadDateInput date picker.
Will this be fixed, or is there anything we can do about it?

[Steve]

Hi Ed,

The built-in editor for a datetime report parameter is using a composite control that uses input and asp:Calendar. The calendar styling is not influenced by the skin of the web viewer and you can see its designed look from the attached screenshot.
Generally the built-in report parameters' purpose is to provide basic UI that is available out of the box and that is enough for most scenarios. For other cases, when you require customization, you can hide all report parameters (Visible=false), create a custom parameter area and wire it up to the Report API e.g. use RadDatePicker for ASP.NET AJAX control and pass the input via the report API:

Copy Code

Telerik.Reporting.Report report = (Telerik.Reporting.Report)this.ReportViewer1.Report;
report.ReportParameters["MyParam"].Value = RadDatePicker1.SelectedDate;

All the best,
Steve
the Telerik team

[Ed Lance]

Thanks for the reply.  I'm really surprised that you don't use your own date picker!  The built in asp:calendar is ugly by comparison.  Also, it doesn't even get influenced by the page's css. 

I strongly recommend that you replace this with the rad date picker, and that the report viewer follow your skins.  Everything else you have for ASP.Net UI does. 

I know that I can use my own UI, but one of the benefits of having a report viewer like this one or the SSRS one is that you don't have to do a UI for the parameters.  I don't want to have to have custom UI for the dozens of reports that are in just one project.  Really, I'm not looking for customization of the parameters, I just want them to look nice.

Thanks

[Steve]

Hello Ed,

We understand your point and thank you for your honest feedback. The main reason why we're not using our RadDatePicker is because that would mean we would depend on (and probably have to distribute) the Telerik.Web.UI assembly which is quite big and we do not want to increase the size of our distribution. Another reason is licensing - currently using the asp:calendar we do not depend on anything else and one can only purchase Telerik Reporting product. If we involve our RadControls, this would mean another product suite.

Regards,
Steve
the Telerik team

[Ed Lance]

Even though it's an ASP control, I think it would be good if it was styled up with the chosen skin.  You should be able to at least do that.

How about exposing the calendar control's appearance properties (font, border etc) in the ReportViewer control?  That would at least give us some options. 

[Steve]

Hi Ed,

Maybe I should have included in my previous posts that we have plans to revamp the asp.net viewer and hopefully we would be able to match its skins with the skins of the RadControls for ASP.NET AJAX. This is in our TODO list, but we cannot engage with a time frame at this point.

As you probably know the report parameters area is in a separate iframe and that is why it does not pick up the css of the main page.

Regards,
Steve
the Telerik team

[Martin]

Hi Steve,

Do these plans you mention to revamp the report viewer have a current time frame? When will it be available?... It's been a year now.

[Steve]

Hi Martin,

We were focused on other high importance features (standalone report designer and pivot chart) and have not started working on the viewer yet.

Thank you for the patience.

All the best,
Steve
the Telerik team

[Ed Lance]

Steve,
I really don't understand your resistance to just fixing this.  If I F12 a page with the report viewer and start looking, the parameters area is being styled by a resource coming from the report viewer component.  

<link href="/Telerik.ReportViewer.axd?name=Resources.ParametersArea.css&optype=Resource&version=6.0.12.215" rel="stylesheet" type="text/css"/>

Seems like to me it wouldn't be that hard to add some style classes there that would at least make the date picker look consistent with the rest of the reportviewer, i.e. some fonts and alignments etc. 

Or, you can see that the calendar HTML has inline styles, how hard would it be to add some styles there to get the fonts consistent?

<table title="Calendar" id="Calendar1" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-collapse: collapse;" cellSpacing="0" cellPadding="2">

I did a large site last year with nearly 50 Telerik reports, I use this thing and I sell it to potential customers.  But it's kinda embarrassing when everything else that is Telerik on my page looks consistent except for the big Times New Roman fonts in this date picker.

Also, the canned response of 'just use your own parameter controls' isn't going to be that helpful to me.  When you have a project with a bunch of reports and limited time to do them, you can't afford to do custom pages for every report.  I use a single .aspx page that uses a variable to determine at run time which report to load.  So I need the report's default parameter area to be there.  And I need it to look right.

thanks

[Martin]

+1

We and our clients love the reporting functionality, but they want it to look great too (and consistent with the viewer UI).

I'm also at Ed's situation: I'm not building a page for every different report i have in my solution... it'll take me ages. I have a single report page, loaded at runtime.

Please help us.

[Stef]

Hi everyone,

As was stated previously by my colleague, our focus was over the newly introduced features like the Standalone Designer and the Graph item which ease a lot the developers work. Nevertheless, you have a point if you do not want to use your own custom UI. You can use javascript, even better the jQuery library, to insert your .css files into the iframe which loads the DateTime parameter editor, for example:

<script type="text/javascript">
              $('#ReportViewer1_CalendarFrame').load(function () {
                  $(this.contentDocument).find('head').append('<link rel="stylesheet" href="StyleSheet1.css">');
              });
          </script>

Let us know if you have any other questions.

Regards,
Stef
the Telerik team

[Martin]

Hi Stef,

I'm not quite content with your answer, but I guess we'll have to go with this approach until you guys release a nice new web report viewer :(.

If somebody is also interested in this topic, i found some useful resources for styling the asp.net calendar:

http://www.obout.com/calendar/calendar_style_galery.aspx
http://www.ezineasp.net/Samples/ASP-Net-cs/Standard-Server-Controls/Calendar-Control-Customized-with-CSS-Styles/Default.aspx

Regards,

[Erman]

Hi Steve,

We have a smillar issue now and we have not succeeded to use rad calendar in telerik reporting. Now we have a report book getting date as a parameter and we are trying to send this date using RadCalendar. Hence we added a radCalender and RadButton into the page and the following code into button click.

reportBook.Reports[i].ReportParameters["ReportDate"].Value = item.Value;
reportSource.ReportDocument = reportBook;
ReportViewer1.ReportSource = reportSource;
ReportViewer1.RefreshReport();

 

At the end we gor the following error.

InnerException = {"Value cannot be null.\r\nParameter name: key"}

 

Could you please comment on this issue or share an example about sending parameters from outside in reportbook.

Regards,

Erman

 

[Erman]

Hi Steve,

 We have the smillar problem when we are trying to use
RadCalendar for sending parameters from outside. I am trying to send parameters
when I click to a button using the following sample code.The sample code

       var a =
ReportViewer1.Report.ReportParameters;

            foreach (var
item in a)

            {

                item.Value
= "05-05-2015";

                for (int
i = 0; i < reportBook.Reports.Count; i++)

                {

                   
reportBook.Reports[i].ReportParameters["Tarih"].Value = item.Value;

                }

            }

           
reportSource.ReportDocument = reportBook;

           
ReportViewer1.ReportSource = reportSource;

           
ReportViewer1.RefreshReport();

       

 At the end I got the following error message.
 

InnerException = {"Value cannot be null.\r\nParameter
name: key"}

 
Could you please comment on our process and share some
sample codes about using RadCalendar at reportbook parameter selection.

 
Regards,
Erman

[Stef]

Hello,

@Martin: As of Q3 2013 there is a new HTML% Report Viewer which allows you to customize the parameters editors in the viewer's parameters area. For more details please check the following articles:

1. HTML5 Viewer Overview - includes details about the viewer, the required settings and how it works;
2. HTML5 Viewer Quick Start- details how to add the viewer via Visual Sudio item template;
3. Telerik Reporting REST Services- details about the Reporting REST services;
4. How To: Create a Custom Parameter Editor- details how to customize parameters editors;

@Erman: You can also test to switch to the new HTML5 Report Viewer. About the reported error, please check if report parameters' Mergeable property is set to false, and if the latest available internal build 9.0.15.422 resolves the issue after upgrading the project. The internal build can be downloaded from your Telerik account - Products & Subscriptions - Latest internal builds - Reporting.
If you need further help, please open a support ticket and send us the problematic report definition and the exact exception's stack trace.

Regards,
Stef
Telerik