Page jumps to the top after datepicker/timepicker popup

[Sunghwan]

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>

 

 

 

[Dimo]

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.

[Sunghwan]

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