RadDatePicker Background images are not visible

8 posts, 1 answers
  1. Nirav
    Nirav avatar
    48 posts
    Member since:
    Sep 2008

    Posted 14 Dec 2009 Link to this post

    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> 

    ###############################################################################
  2. Steve
    Steve avatar
    1885 posts
    Member since:
    Dec 2008

    Posted 14 Dec 2009 Link to this post

    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
  3. Radoslav
    Admin
    Radoslav avatar
    1566 posts

    Posted 15 Dec 2009 Link to this post

    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.
  4. Nirav
    Nirav avatar
    48 posts
    Member since:
    Sep 2008

    Posted 15 Dec 2009 Link to this post

    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?
  5. Radoslav
    Admin
    Radoslav avatar
    1566 posts

    Posted 16 Dec 2009 Link to this post

    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.
  6. Nirav
    Nirav avatar
    48 posts
    Member since:
    Sep 2008

    Posted 16 Dec 2009 Link to this post

    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 ?
  7. Answer
    Radoslav
    Admin
    Radoslav avatar
    1566 posts

    Posted 17 Dec 2009 Link to this post

    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.
  8. Nirav
    Nirav avatar
    48 posts
    Member since:
    Sep 2008

    Posted 17 Dec 2009 Link to this post

    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> 
     



    ############################################################################
Back to Top