Page jumps to the top after datepicker/timepicker popup

3 posts, 0 answers
  1. Sunghwan
    Sunghwan avatar
    8 posts
    Member since:
    Dec 2008

    Posted 30 Dec 2008 Link to this post

    I need to popup date picker and  time picker above their images using PopupAbove javascript function. The issue is that page jumps/scrolls to the top after PopupAbove function. Does anyone have a solution for it? Thanks in advance. 

     

    Public

     

     

    Partial Class NewWebUI

     

        Inherits System.Web.UI.Page

     

     

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        dtp1.DatePopupButton.Attributes.Add(

     

    "onclick", "PopupAbove('DATE', '" + dtp1.ClientID + "')")

     

        dtp1.TimePopupButton.Attributes.Add(

     

    "onclick", "PopupAbove('TIME', '" + dtp1.ClientID + "')")

     

    End Sub

     

     

    <%

    @ Page Language="vb" AutoEventWireup="false" CodeBehind="NewWebUI.aspx.vb" Inherits="ASPNETSample.NewWebUI" %>

     

     

    <%

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

     

     

     


    <!
     
    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

     

    <

     

    html xmlns="http://www.w3.org/1999/xhtml" >

     

    <

     

    head runat="server">

     

     

    <title>Untitled Page</title 

     

     

    <script type="text/javascript">

     

     

    function PopupAbove(source, pickerID)

     

    {

     

    try

    {

     

    var datePicker = $find(pickerID);

     

    var textBox = datePicker.get_textBox();  

     

     

    var position = datePicker.getElementPosition(textBox);

     

     

    if (source=="DATE")

    {

     

    var popupElement = datePicker.get_popupContainer();

     

    var dimensions = datePicker.getElementDimensions(popupElement);  

     

    datePicker.showPopup(position.x, position.y - dimensions.height);

    }

     

    else

    {

     

    var popupElement = datePicker.get_timePopupContainer();

     

    var dimensions = datePicker.getElementDimensions(popupElement);  

     

    datePicker.showTimePopup(position.x, position.y - dimensions.height);

    }

    }

     

    catch(err)

    {}

    }

     

    </script>

    </

     

    head>

     

    <

     

    body>

     

     

    <form id="form1" runat="server">

     

     

    <div>

     

     

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>

     

     

    <telerik:RadAjaxManager ID="rad1" runat="server" ></telerik:RadAjaxManager>

     

     

     

     

     

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

     

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

     

     

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

     

     

     

    <telerik:RadDateTimePicker ID="dtp1" runat="server" skin="Default" >

     

     

    <Calendar >

     

     

    </Calendar>

     

     

    <TimeView Columns="3" TimeFormat="hh:mm tt" StartTime="0:00:00" EndTime="23:59:00" >

     

     

    </TimeView>

     

     

    </telerik:RadDateTimePicker>  

     

     

    </div>

     

    </form>

     

    </

     

    body>

     

    </

     

    html>

     

     

     

  2. Dimo
    Admin
    Dimo avatar
    8478 posts

    Posted 30 Dec 2008 Link to this post

    Hello Sunghwan,

    The answer to your question is in the related online demo:

    http://demos.telerik.com/aspnet-ajax/Calendar/Examples/DatePicker/ClientAPI/DefaultVB.aspx


            Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyBase.Load
                RadDatePicker2.DatePopupButton.Attributes.Add("onclick", "PopupAbove(event, '" & RadDatePicker2.ClientID & "');return false;")
            End Sub



    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. Sunghwan
    Sunghwan avatar
    8 posts
    Member since:
    Dec 2008

    Posted 30 Dec 2008 Link to this post

    Thank you very much for a quick response. That did the trick!!!
Back to Top