This is a migrated thread and some comments may be shown as answers.

DatePicker image problem

17 Answers 521 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Paresh Patel
Top achievements
Rank 1
Paresh Patel asked on 27 Feb 2010, 06:08 AM
Hi,

I have used two date picker controls in my page.
frequently i am facing problem that date picker does not display image , instead it display text "Open the calender popup" as displayed in attached image.


17 Answers, 1 is accepted

Sort by
0
robertw102
Top achievements
Rank 1
answered on 01 Mar 2010, 03:02 PM
I guessing this is related to an issue where the old control's used to insert the image filename when you inserted a RadDatePicker control on the page. I think this should fix it.

<DatePopupButton HoverImageUrl="" ImageUrl="" /> 

Just the remove the line above from you RadDatePicker control or just set it to same (clearing the HoverImageUrl and ImageUrl properties). I'm guessing these are set in your case, thus the reason it can't find the image file and shows the alternate text for the image.

I hope that helps.
0
Paresh Patel
Top achievements
Rank 1
answered on 02 Mar 2010, 04:30 AM
Hi,

sometime datepicker image displays properly and sometime not.

my code is:

<telerik:RadDatePicker DateInput-ReadOnly="false" DateInput-DateFormat="dd MMM yyyy" Width="185px" ID="dtStartDt" runat="server">                                  
</telerik:RadDatePicker> 

0
Radoslav
Telerik team
answered on 02 Mar 2010, 08:59 AM
Hello Paresh,

Could you please provide a bit more information on your scenario.  Are you using the date picker control with embedded skin or you set the EnableEmbeddedSkins property to false and use the custom one? Also it will be helpful if you could post the RadDatePicker control declaration.

Regards,
Radoslav
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Paresh Patel
Top achievements
Rank 1
answered on 02 Mar 2010, 03:01 PM
Hi,
I am using Telerik version 2009.3.1208.35

I have registered it on page

<%

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

 


and datepicker code is :
<telerik:RadDatePicker DateInput-ReadOnly="false" DateInput-DateFormat="dd MMM yyyy" Width="185px" ID="dtStartDt" runat="server">                                     
</telerik:RadDatePicker>    
 

The scenario is, i have 2 panel in my page in DotNetNuke. the datepicker is in 2nd panel which is invisible initially. on click event of a button in panel 1 will make 2nd panel visible.
and here frequently it creates problem. sometime it displays properly.
both panel are in RadAjaxPanel.


Thanks,
0
Radoslav
Telerik team
answered on 05 Mar 2010, 02:18 PM
Hello Paresh,

I tried to replicate the described issue. Unfortunately my attempts were not successful and I am unable to recreate the described behavior. For your convenience I prepared a simple example. Please check it out and let me know what differs in your case.

Greetings,
Radoslav
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Cheryl
Top achievements
Rank 1
answered on 09 Mar 2011, 01:07 AM
I too am getting getting this problem, but only when IE Compatibility View is turned OFF

Note that this happens for me under IE9 RC, it doesn't happen under IE8
0
Radoslav
Telerik team
answered on 14 Mar 2011, 12:34 PM
Hi Cheryl,

Indeed, I verified that the described issue exists in the current version of the controls under the IE9 RC. However our developers are aware and they will start working on the resolution of this issue.

Regards,
Radoslav
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Thomas
Top achievements
Rank 1
answered on 13 Jan 2012, 03:32 PM
Hi,

is that issue fiexed in a newer version?  We still have the problem with rendering the DatePicker in IE9 (IE8 works fine).

Best regards

Thomas
0
Radoslav
Telerik team
answered on 18 Jan 2012, 08:39 AM
Hello Thomas,

Could you please upgrade the RadControls to the latest version and let me know if the issues still persist. On the following links you could find instructions how to use the hotfix dlls or how to upgrade Telerik's RadControls to another version:
http://www.telerik.com/help/aspnet-ajax/introduction-using-hotfix.html
http://www.telerik.com/support/kb/aspnet-ajax/general/updating-radcontrols-for-asp-net-to-another-version-or-license.aspx

Kind regards,
Radoslav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Thomas
Top achievements
Rank 1
answered on 25 Jan 2012, 02:53 PM
OK I found the reason why somteimes DatePicker renders wrong in IE 9. It's the issue described in http://blogs.telerik.com/aspnetmvcteam/posts/10-05-03/internet-explorer-css-limits.aspx.Using many RadControls on one page and DatePicker is on the end of the page the maximum of 31 stylesheets could by reached. Perhaps, the code of the RadContrls "fork" to several stylesheets in case of IE8 and IE9. The code below rendes correct in IE8 but in IE9 you see the DatePicker rendered wrong (There is no sense to use the controls in the way but only for demonstrating the issue)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="RadDatePickerRenderProblem.WebForm1" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
    <!--[if IE 9]>
  <link href="css/ie9fix1.css" rel="stylesheet" type="text/css" />
  <link href="css/ie9fix2.css" rel="stylesheet" type="text/css" />
  <![endif]-->
 </head>
<body>
    <form id="form1" runat="server">
    <ajax:ToolkitScriptManager ID="RadScriptManager_1" runat="server" EnablePageMethods="true"
        AsyncPostBackTimeout="600" />
    <telerik:RadInputManager ID="RadInputManager1" runat="server">
        <telerik:TextBoxSetting BehaviorID="TextBoxBehaviorOptional" EmptyMessage="">
            <TargetControls>
            </TargetControls>
        </telerik:TextBoxSetting>
    </telerik:RadInputManager>
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager_1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Settings1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Settings1" LoadingPanelID="RadAjaxLoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" runat="server" InitialDelayTime="200">
        <div class="RadAjaxLoadingPanelText">
            <div>
                Loading...</div>
        </div>
    </telerik:RadAjaxLoadingPanel>
    <div id="Settings1" runat="server" style="margin: 5px 5px 5px 5px; overflow: visible;">
        <telerik:RadComboBox ID="RadComboBox1" runat="server" />
        <telerik:RadPanelBar runat="server" ID="RadPanelBarExportSettings" ExpandMode="FullExpandedItem"
            CssClass="PanelBar Big">
            <Items>
                <telerik:RadPanelItem Expanded="True" Text="PanelItem1" runat="server">
                    <Items>
                        <telerik:RadPanelItem Value="VersichertenInformationen" runat="server">
                            <ItemTemplate>
                                <telerik:RadListView ID="RadListView1" runat="server" EnableEmbeddedSkins="false"
                                    EnableEmbeddedBaseStylesheet="false" />
                                <table border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td>
                                            <telerik:RadButton ID="RadButton1" runat="server" Text="RadButton">
                                            </telerik:RadButton>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <telerik:RadRibbonBar ID="RadRibbonBar1" runat="server">
                                            </telerik:RadRibbonBar>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <telerik:RadTreeView ID="RadTreeView1" runat="server">
                                            </telerik:RadTreeView>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <telerik:RadMenu ID="RadMenu1" runat="server">
                                            </telerik:RadMenu>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <telerik:RadSiteMap ID="RadSiteMap1" runat="server">
                                            </telerik:RadSiteMap>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <telerik:RadMultiPage ID="RadMultiPage1" runat="server">
                                                <telerik:RadPageView ID="RadPageView1" runat="server">
                                                </telerik:RadPageView>
                                            </telerik:RadMultiPage>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <telerik:RadTabStrip ID="RadTabStrip1" runat="server">
                                            </telerik:RadTabStrip>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <telerik:RadToolBar ID="RadToolBar1" runat="server">
                                            </telerik:RadToolBar>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <telerik:RadColorPicker ID="RadColorPicker1" runat="server">
                                            </telerik:RadColorPicker>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <telerik:RadTagCloud ID="RadTagCloud1" runat="server">
                                            </telerik:RadTagCloud>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <telerik:RadDatePicker runat="server" ID="txtGeburtsdatum" MinDate="01.01.1900" />
                                        </td>
                                    </tr>
                                </table>
                            </ItemTemplate>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelBar>
    </div>
    </form>
</body>
</html>

The attached sceenshots show the pgae in IE8 and IE9.

All the best,

Thomas
0
Andy
Top achievements
Rank 1
answered on 31 Aug 2012, 06:21 PM
Hi Telerik team,

I have the same issue as Patel mentioned. I am using IE version 8 & the Date control doesnt display the image.
Instead shows message "Open The Calendar Popup"

The code I have is,

 

 

<telerik:RadDatePicker ID="RadDatePicker2" runat="server" MinDate="1006-01-01" SharedCalendarID="sharedCalendar" Width="100px">

 

 

 

</telerik:RadDatePicker>

 


Again this happens frequently on some user machines & not so frequent with some of the users.
I will really appreciate if somebody can throw some light here as we are already in production with the code.

Thank you
0
Piyushkumar
Top achievements
Rank 1
answered on 23 Sep 2013, 08:20 PM
Hi Telerik Team,

I am facing same issue... Any fix or work around for this issue.
I am the only one who was favouring Telerik date picker in my team and I am in trouble now.

Our testing department has rejected the change to date time picker because many of our clients are using IE 8, IE 9, IE10.

Please look into it ASAP.

Guys, 
I have added it to the issue tracker. Please vote it so it gets priority.
http://feedback.telerik.com/Project/108/Feedback/Details/61531-raddatetimepicker-rendering-issue-on-ie-9-ui-is-screwed-on-first-load

Thanks,
P Shah
0
Radoslav
Telerik team
answered on 26 Sep 2013, 08:17 AM
Hi Piyushkumar,

Could you please verify that you do not reach the EI stylesheet limits as Thomas suggested? You can try adding the RadStyleSheetManager as is shown into the following thread:
http://www.telerik.com/community/forums/aspnet-ajax/scriptmanager-and-stylesheetmanager/question-on-2010-sp1.aspx

Looking forward for your reply.

Regards,
Radoslav
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Piyushkumar
Top achievements
Rank 1
answered on 26 Sep 2013, 01:59 PM
Hi Radoslav,

Thanks for your prompt reply.
I am adding following comments just in case if it helps to investigate the issue..

I will definitely try your suggestion.
However I do not think it is because of stylesheets limit. Reasons...
    - I tried to replicate the issue without any stylesheets used. It contains AJAX & Telerik DLLs,
       one form with Master page and 3 user controls and one of the control has 2 date pickers.
       (Note: I have attached the sample project to replicate the issue at the issue tracker, since
         this does not allow .zip... You will need to add DLL references mentioned in Steps.txt
         to run the application. I removed DLLs as the size reached to 16 MB.. Here is link to issue tracker
)
          http://feedback.telerik.com/Project/108/Feedback/Details/61531-raddatetimepicker-rendering-issue-on-ie-9-ui-is-screwed-on-first-load

    - The issue happens only with first load (i.e. after clearing browser cache)
       Once I click on date link, and then time link the icons appear and it is available thereafter.
       If the issue was due to stylesheets limit, then it will not load it on subsequent calls as well.

I think this has something to do with Telerik stuff not available on 1st request.
May be Telerik developers can add something to pre-load the contents.

Thanks,
Piyush
0
Radoslav
Telerik team
answered on 01 Oct 2013, 07:45 AM
Hello Piyushkumar,

To avoid the described issue you need to add a RadStyleSheetManager control into your master page and then to register one of the DateTimePickers as skinnable controls into the Control1’s page load method:
<form id="form1" runat="server">
    <ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server" AsyncPostBackTimeout="36000">
    </ajaxToolkit:ToolkitScriptManager>
    <telerik:RadStyleSheetManager runat="server"></telerik:RadStyleSheetManager>
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
</form>
Protected Overrides Sub OnLoad(e As EventArgs)
        MyBase.OnLoad(e)
 
        RadStyleSheetManager.GetCurrent(Me.Page).RegisterSkinnableControl(dtpDate1)
        RadStyleSheetManager.GetCurrent(Me.Page).RegisterSkinnableControl(dtpDate1.Calendar)
End Sub

This will force styles to be loaded when ajax call is executed and the control is loaded.

Please give it try and let me know if you experience any problems.

Regards,
Radoslav
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Piyushkumar
Top achievements
Rank 1
answered on 03 Oct 2013, 02:43 PM
Hi Radoslav,

Thank you. The solution works.

However one minor issue, may be you can help.
The width of the date input is stretched now and it screws my UI and overlap the next item.
Screenshot attached.

Thanks,
Piyush
0
Radoslav
Telerik team
answered on 08 Oct 2013, 06:33 AM
Hello Piyushkumar,

I assume that the problem is caused by some css rules, however based on the provided information it is hard to say what is the exact reason for the described issue. Could you please send us a small runnable example where the problem can be reproduced? You could open a formal support ticket from your Telerik account and attach a ZIP file there (or you can send us a live URL). Thus we will be able to gather more details about your scenario and provide you solution.

Looking forward for your reply.

Regards,
Radoslav
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Calendar
Asked by
Paresh Patel
Top achievements
Rank 1
Answers by
robertw102
Top achievements
Rank 1
Paresh Patel
Top achievements
Rank 1
Radoslav
Telerik team
Cheryl
Top achievements
Rank 1
Thomas
Top achievements
Rank 1
Andy
Top achievements
Rank 1
Piyushkumar
Top achievements
Rank 1
Share this question
or