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

RadDatePicker doesn't show Calendar properly

4 Answers 632 Views

Calendar

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

Foenix asked on 25 Nov 2010, 08:30 PM

Hi!
By default RadDatePicker displays its Calendar below DateInput, but I need to display it above. In the help I've found how to implement it using JavaScript, and it works in general. A problem comes when I disable and then enable RadDatePicker with JavaScript. After that when I click on DatePopupButton the Calendar appears for a short moment and then disappears.
Here is my aspx-page code:

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

<head runat="server">

<title></title>

</head>

<body>

<telerik:RadCodeBlock ID="radCodeBlock" runat="server">

<script type="text/javascript">

function enableDTPicker(isEnabled)

{

var dtStartDate = $find("<%=dtStartDate.ClientID %>");

if (dtStartDate != null)

{

dtStartDate.set_enabled(isEnabled);

dtStartDate.get_calendar().set_enabled(isEnabled);

dtStartDate.get_popupButton().disabled = !isEnabled;

}

function PopupOpen()

{

var picker = $find("<%= dtStartDate.ClientID %>");

var textBox = picker.get_textBox();

var popupElement = picker.get_popupContainer();

var dimensions = picker.getElementDimensions(popupElement);

var position = picker.getElementPosition(textBox);

picker.showPopup(position.x - 10, position.y - dimensions.height - 5);

}

</script>

</telerik:RadCodeBlock>

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

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

<table>

<tr><td><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></td></tr>

<tr>

<td>

<table border="0" cellspacing="0" cellpadding="3" width="100%">

<tr>

<td><asp:RadioButton ID="option1" Text="option1" GroupName="group1" runat="server" Checked="true" /></td>

<td> </td>

</tr>

<tr>

<td><asp:RadioButton ID="option2" Text="option2" GroupName="group1" runat="server" Checked="true" /></td>

<td>

<telerik:RadDatePicker ID="dtStartDate" runat="server" Enabled="true">

<DatePopupButton onclick="PopupOpen();" Enabled="true" />

</telerik:RadDatePicker>

</td>

</tr>

<tr>

<td><asp:RadioButton ID="option3" Text="option3" GroupName="group1" runat="server" /></td>

<td> </td>

</tr>

</table>

</td>

</tr>

</table>

</form>

</body>

</html>

It's cs-file:

using System;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

option1.Attributes.Add("onclick", "enableDTPicker(false);");

option2.Attributes.Add("onclick", "enableDTPicker(true);");

option3.Attributes.Add("onclick", "enableDTPicker(false);");

}

In the beginning the RadDatePicker control is enabled, and click on DatePopupButton opens Calendar properly. If I select option1 or option3 the RadDatePicker becomes disabled. Then I select option3, and the RadDatePicker becomes enabled again, but after clicking on DatePopupButton the Calendar just appears and then disappears in a moment.

Why is that and how can I fix it?
Thank you

4 Answers, 1 is accepted

Accepted

answered on 26 Nov 2010, 05:08 PM

Hi Foenix,

Unless you are using a rather old RadControls version (e.g. Q1 2009), you can define popup direction declaratively - you don't need all that Javascript now. Otherwise, you can hide and show the picker client-side (by hiding its parent HTML element with a display:none style), instead of disabling it.

<%@ Page Language="C#" %>

<%@ 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">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>RadControls</title>

</head>

<body>

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

<asp:ScriptManager ID="ScriptManager1" runat="server" />

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

<telerik:RadDatePicker ID="RadDatePicker1" runat="server" PopupDirection="TopLeft" />

<br /><br />

<a href="#" onclick="return togglePicker();">toggle picker</a>

<script type="text/javascript">

function togglePicker()

{

var picker = $find("RadDatePicker1");

picker.set_enabled(!picker.get_enabled());

return false;

}

</script>

</form>

</body>

</html>

Best wishes,
Dimo
the Telerik team

Browse the vast support resources we have to jumpstart 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.

answered on 07 Dec 2011, 03:15 PM

Hi All..

I am having a issue similar to the prvious posts ..

I am having a lable and a raddatepicker in the same line
but when i view in IE9 the raddatepicker is moved down without displaying in the staright line to the label.
It happens only in IE9

code is like this

div class="twocolumn row">

Date of Birth *

</label>

<% Html.RenderPartial(

"HLDatePickerView", new ViewDataDictionary

{

new KeyValuePair<string, object>("ControlStyle", "telerik"),

new KeyValuePair<string, object>("InitializeControlAction",

new Action<Telerik.Web.UI.RadDatePicker>(c=>

{

c.ID =

"DOB";

// c.EnableScreenBoundaryDetection =false;

c.Calendar.Width=

Unit.Pixel(250);

c.Style.Value =

"display: block !important;";

if(Model.ModelState != null && !Model.ModelState.IsValidField("DOB"))

c.DateInput.CssClass =

"input-validation-error";

c.MinDate =

new DateTime(1900,1,1);

})),

new KeyValuePair<string, object>("DateValue", Model.DOB)

}); %>

</div>

out put is displayed in IE9 like this

Date of Birth
radcontrol
can you reply soon,,,