[Solved] RadDatePicker Background images are not visible

[Nirav]

Hi, I am using Tekerik controls and in one of my webpage, I used RadDatePicker. Somehow, none of the images are visible when I click on DatePicker, its not showing any background-image or any next month, prev month etc images. Date Controls seems to be Transparent.  All the images are embedded so I am not sure what else to check. I am pasting all of my code related to RadDatePicker here, can someone please help me to see why Its not showing any images?
Just some more information, I have some ASP:Panels on my page too and have master page also. So This code is placed under <ASP:Content>
###############################################################################

<table>

                    <table >
                        <tr valign="top">
                            <td valign="top">
                                <div style="margin-top:7px; text-align: right;">
                                    <label for='<%= RadDatePicker1.DateInput.ClientID + "_TextBox" %>'>From Date:</label>
                                </div>
                            </td>
                            <td valign="top">
                                <telerik:RadDatePicker id="RadDatePicker1" Runat="server"
                                MinDate="2000-01-01"
                                SharedCalendarID="sharedCalendar" Width="100px">
                                <Calendar ID="Calendar1" EnableEmbeddedSkins="false" Skin="Sunny" runat="server"></Calendar>
                                <DatePopupButton ImageUrl="images/datePickerPopup.gif"  HoverImageUrl="images/datePickerPopupHover.gif" />
                                </telerik:RadDatePicker>
                            </td>

                            <td valign="top">
                                <div style="margin-top:7px; margin-left: 10px; text-align: right;">
                                    <label for='<%= RadDatePicker2.DateInput.ClientID + "_TextBox" %>'>To Date:</label>
                                </div>
                            </td>
                            <td valign="top">
                                <label for="RadDatePicker2"></label>
                                <telerik:RadDatePicker id="RadDatePicker2" Runat="server"
                                MinDate="2000-01-01"
                                SharedCalendarID="sharedCalendar" Width="100px">
                                <Calendar ID="Calendar2" EnableEmbeddedSkins="false" Skin="Sunny" runat="server"></Calendar>
                                <DatePopupButton ImageUrl="images/datePickerPopup.gif" HoverImageUrl="images/datePickerPopupHover.gif" />
                                </telerik:RadDatePicker>
                            </td>

                        </tr>

                    </table>



<tr>
                <td colspan="100%">
                    <telerik:RadCalendar ID="sharedCalendar" runat="server" EnableMultiSelect="false"
                        RangeMinDate="2000/01/01" EnableEmbeddedSkins="false" Skin="Sunny"
                        NavigationNextImage="Images/arrowRight.gif" NavigationPrevImage="Images/arrowLeft.gif"
                        FastNavigationPrevImage="Images/fastNavLeft.gif" FastNavigationNextImage="Images/fastNavRight.gif">
                    </telerik:RadCalendar>
                    <asp:PlaceHolder ID="sharedCalendarPlaceHolder" Runat="server"></asp:PlaceHolder>

                </td>
            </tr>

</table>

Web.Config

<assemblies>
<add assembly="Telerik.Charting, Version=2.0.3.0, Culture=neutral, PublicKeyToken=D14F3DCC8E3E8763"/>
</assemblies>

<httpHandlers>
<add path="Telerik.Web.UI.WebResource.axd" verb="*" type="Telerik.Web.UI.WebResource, Telerik.Web.UI, Version=2008.2.723.20, Culture=neutral, PublicKeyToken=121fae78165ba3d4" validate="false"/>
</httpHandlers>

###############################################################################

[sitefinitysteve]

I noticed you have an external skin defined on the picker...I THINK (cant remember totally), that you need to have the menu styles defined as well in your skin, or make a menu _Sunny skin and attach that .css as well.

Firebug the menu thats popping up, is it looking for menu Items with your _Sunny Skin?  Regardless you can just nab what its looking for and paste it into your custom skin

[Radoslav]

Hi Nirav,

 I looked through your code and I saw the problem. It is in RadDatePickers declaration. For each RadDatePicker you use following code :

<telerik:RadDatePicker id="RadDatePicker1" Runat="server"
  MinDate="2000-01-01" SharedCalendarID="sharedCalendar" Width="100px">                                                                                <Calendar ID="Calendar1" EnableEmbeddedSkins="false" Skin="Sunny" runat="server"></Calendar>
<DatePopupButton ImageUrl="images/datePickerPopup.gif"  HoverImageUrl="images/datePickerPopupHover.gif" />                                   </telerik:RadDatePicker>

However when you share a RadCalendar control you need to use the following RadDatePicker declaration:

<telerik:RadDatePicker ID="RadDatePicker1" runat="server" MinDate="2000-01-01" SharedCalendarID="sharedCalendar" Width="100px">
</telerik:RadDatePicker>

Sincerely yours,
Radoslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Nirav]

oh yes, I changed my code as per your code and it showed calender properly.
But still there is one problem. If I apply any other Skin, its showing runtime error that Unable to Find Embedded skin 'Sunny'.
I am trying to apply Skin="Sunny" to the shared calender.
How do I apply this skin to radDatePicker?

[Radoslav]

Hello Nirav,

To avoid “unable to find embedded skin with name Sunny” error you need to set EnableEmbeddedSkins="false" to each of RadDatePicker controls. The RadDatePicker has a Skin property as well. Also you could add custom images to the date popup button with following declaration: 

 

<telerik:RadDatePicker ID="RadDatePicker1" EnableEmbeddedSkins="false" runat="server" MinDate="2000-01-01" SharedCalendarID="sharedCalendar" Width="100px">
   <DatePopupButton ImageUrl="images/datePickerPopup.gif"
       HoverImageUrl="images/datePickerPopupHover.gif"/>
</telerik:RadDatePicker>

 

I hope this information helps

All the best,
Radoslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Nirav]

Hi, Thanks for your reply.
I tried this but somehow did not work.
I tried setting EmbeddedSkins="False" for every datepicker but then it did not give error but it did not show any image again. Again its background went as Transparent.
Am I still missing something ?

[Radoslav]

Hi Nirav,

I prepared a sample project for you using a shared DateTimePicker with custom skin there.  Please check it out and let me know what differs in your case. Also you could see if you defined your skin properly. In your skin’s css file you should have the same classes as in my example with only one difference – all your classes should end with _Sunny instead of _MyCustomSkin.

Regards,
Radoslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Nirav]

Thanks a lot for this example.

Finally I got this working with the skin. There was one change I did than last code. I removed "EnableEmbeddedSkins" property from DatePickers and just kept it in Shared Control.

Here is my working code as under. Thanks again,
############################################################################

                    <table >
                        <tr valign="top">
                            <td valign="top">
                                <div style="margin-top:7px; text-align: right;">
                                    <label for='<%= RadDatePicker1.DateInput.ClientID + "_TextBox" %>'>From Date:</label>
                                </div>
                            </td>
                            <td valign="top">
                                <telerik:RadDatePicker id="RadDatePicker1" Runat="server"
                                MinDate="2000-01-01"
                                SharedCalendarID="sharedCalendar" Width="100px">
                                    <datepopupbutton hoverimageurl="Images/datePickerPopupHover.gif"
                                        imageurl="Images/datePickerPopup.gif" />
                                </telerik:RadDatePicker>
                            </td>

                            <td valign="top">
                                <div style="margin-top:7px; margin-left: 10px; text-align: right;">
                                    <label for='<%= RadDatePicker2.DateInput.ClientID + "_TextBox" %>'>To Date:</label>
                                </div>
                            </td>
                            <td valign="top">
                                <label for="RadDatePicker2"></label>
                                <telerik:RadDatePicker id="RadDatePicker2" Runat="server"
                                MinDate="2000-01-01"
                                SharedCalendarID="sharedCalendar" Width="100px">
                                    <datepopupbutton hoverimageurl="Images/datePickerPopupHover.gif"
                                        imageurl="Images/datePickerPopup.gif" />
                                </telerik:RadDatePicker>
                            </td>

                        </tr>

                    </table>



                    <telerik:RadCalendar ID="sharedCalendar" runat="server" EnableMultiSelect="false"
                        RangeMinDate="2000/01/01" EnableEmbeddedSkins="false" Skin="Sunset"
                        NavigationNextImage="Images/arrowRight.gif" NavigationPrevImage="Images/arrowLeft.gif"
                        FastNavigationPrevImage="Images/fastNavLeft.gif" FastNavigationNextImage="Images/fastNavRight.gif">
                    </telerik:RadCalendar>
                    <asp:PlaceHolder ID="sharedCalendarPlaceHolder" Runat="server"></asp:PlaceHolder>

############################################################################