RadTimePicker in IE sets wrong time when using Vertical and Footer

4 posts, 1 answers
  1. Jonathan
    Jonathan avatar
    37 posts
    Member since:
    Sep 2012

    Posted 02 Jun 2011 Link to this post

    I have created an instance of a RadTimePicker with RenderDirection="Vertical" and using a footer template. Then when I pick a time in the time picker control in column 2 or 3 it changes the time ahead by 30 minutes. Eg. if I pick 10:00 AM it closes the popup and puts 10:30 AM in the text box.

    After extensive testing and trying to isolate and recreate the issue I've found that the problem goes away  if

     - I don't use IE 8 (use Firefox or Chrome instead)
     - Use a Render Direction = Horizontal
     - Don't use a footer template on the timepicker popup

    Additionally when I open the popup again - it actually displays the correct time in the popup.

    Please let me know if there is something I have overlooked that can correct this behaviour without using any of the options I listed above which aren't what we want to have to do.


    Is there an e-mail address I could submit a copy of my test application that displays this behaviour to? I can't attach a zip to this... 

    Thanks, 

    Jonathan

    Main code for the page displays below: (there is no code-behind code)


    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
     
    <!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>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        <div>
        <telerik:RadTimePicker ID="tme_startTime" runat="server" Skin="Vista"
            Culture="en-CA" AutoPostBack="false" AutoPostBackControl="TimeView">
                <Calendar ID="Calendar1" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x" runat="server"></Calendar>
                <DatePopupButton Visible="False" CssClass="" ImageUrl="" HoverImageUrl=""></DatePopupButton>
                <TimeView ID="TimeView1" ShowHeader="false" CellSpacing="-1" Culture="en-CA" Interval="00:30:00" RenderDirection="Vertical" HeaderText="" runat="server">
                    <FooterTemplate>
                        <button onclick="javascript: ClosePopup(); return false;">Close</button>
                    </FooterTemplate>
                </TimeView>
                <TimePopupButton CssClass="" ImageUrl="" HoverImageUrl=""></TimePopupButton>
                <DateInput Width="" DisplayDateFormat="dd/MM/yyyy" DateFormat="dd/MM/yyyy"
                    AutoPostBack="false"></DateInput>
            <ShowAnimation Type="Slide" />
            <HideAnimation Type="Slide" />
        </telerik:RadTimePicker>
        44
        <br />
        <br />
     
       66
        <telerik:RadTimePicker ID="RadTimePicker1" runat="server" Skin="Vista"
            Culture="en-CA" AutoPostBack="false" AutoPostBackControl="TimeView">
                <Calendar ID="Calendar2" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x" runat="server"></Calendar>
                <DatePopupButton Visible="False" CssClass="" ImageUrl="" HoverImageUrl=""></DatePopupButton>
                <TimeView ID="TimeView3" CellSpacing="-1" Culture="en-CA" Interval="00:30:00" RenderDirection="Vertical" HeaderText="" runat="server">
                    <FooterTemplate>
     
                    </FooterTemplate>
                </TimeView>
                <TimePopupButton CssClass="" ImageUrl="" HoverImageUrl=""></TimePopupButton>
                <DateInput Width="" DisplayDateFormat="dd/MM/yyyy" DateFormat="dd/MM/yyyy"
                    AutoPostBack="false"></DateInput>
            <ShowAnimation Type="Slide" />
            <HideAnimation Type="Slide" />
        </telerik:RadTimePicker>
     
        <br />
        <br />
        <telerik:RadTimePicker ID="RadTimePicker3" runat="server" AutoPostBack="false" >
                <TimeView ID="TimeView2"  Interval="00:30:00" HeaderText="" RenderDirection="Vertical" runat="server">
                    <FooterTemplate>
                     g
                    </FooterTemplate>
                </TimeView>
        </telerik:RadTimePicker>
        88
        <br />
        <br />
        <telerik:RadTimePicker ID="RadTimePicker2" runat="server" AutoPostBack="false" >
                <TimeView ID="TimeView4"  Interval="00:30:00" HeaderText="" runat="server">
                    <FooterTemplate>
                     g
                    </FooterTemplate>
                </TimeView>
        </telerik:RadTimePicker>
        36
        </div>
        </form>
    </body>
    </html>


  2. Answer
    Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 07 Jun 2011 Link to this post

    Hello Jonathan,

    It seems that the described behaviour is a bug for the RadTimePicker control in IE8 browser. I have already added the issue into our tracking system and our dev team will do their best to provide a fix as soon as possible.
    Thank you for bringing this to our attention.

    Regards,
    Maria Ilieva
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 07 Jun 2011 Link to this post

    Hello Jonathan,

    It seems that the described behaviour is a bug for the RadTimePicker control in IE8 browser. I have already added the issue into our tracking system and our dev team will do their best to provide a fix as soon as possible.
    Thank you for bringing this to our attention.

    Regards,
    Maria Ilieva
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  4. Fortune
    Fortune avatar
    5 posts
    Member since:
    Jun 2011

    Posted 08 Jun 2011 Link to this post

    Hi Jonathan,

    You can try using the following code as workaround: 
    <telerik:RadCodeBlock runat="server">
            <script type="text/javascript">
                Telerik.Web.UI.RadTimeView.prototype.initialize = function () {
                    Telerik.Web.UI.RadTimeView.callBaseMethod(this, "initialize");
                    this.DivElement = $get(this.get_id());
                    var searchedText = '"rcFooter"';
                    if ($telerik.isIE8 || $telerik.isIE7) {
                        searchedText = searchedText.replace(/"/gi, "");
                    }
                    if (this.get_showFooter() && this.DivElement.innerHTML.indexOf(searchedText) == -1) {
                        this.set_showFooter(false);
                    } this._timeMatrix = this._setTimeMatrix();
                    this._tempStyle = null;
                    this._attachEventHandlers();
                }
            </script>
        </telerik:RadCodeBlock>

    Regards,
    F
Back to Top