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>