Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadDatePicker doesn't show Calendar properly

4 Answers 471 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Foenix
Top achievements
Rank 1
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:
<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

Sort by
0
Accepted
Dimo
Telerik team
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"
  
<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.
0
Foenix
Top achievements
Rank 1
answered on 26 Nov 2010, 05:57 PM
Hi Dimo,

Thank you for your answer. We're using Q2 2010 version, so your suggestion works for us. I had tried to use PopupDirection property before I started to look for JavaScript solution. And I had been unable to display popup above the input. The reason is simple -- if you want to display your Calendar popup above DateInput make sure you have enough space to do this. In my case the height of popup was greater than distance from input's upper border to the window's title, so there were no enough space to display Calendar properly.

Thank you very much and have a good day
0
Dimo
Telerik team
answered on 29 Nov 2010, 10:05 AM
Hi Foenix,

Just to clarify, there is a property called EnableScreenBoundaryDetection, which if set to "false", will force the RadDatePicker control to show the Calendar popup in whatever direction you specify. Of course, it is good to ensure that there is enough space for this.

All the best,
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.
0
Praveen
Top achievements
Rank 1
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">

 

 

<label for="DOB">

 

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,,,

 

Tags
Calendar
Asked by
Foenix
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Foenix
Top achievements
Rank 1
Praveen
Top achievements
Rank 1
Share this question
or