RadDatePicker doesn't show Calendar properly

5 posts, 1 answers
  1. Foenix
    Foenix avatar
    20 posts
    Member since:
    Jul 2008

    Posted 25 Nov 2010 Link to this post

    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
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 26 Nov 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Foenix
    Foenix avatar
    20 posts
    Member since:
    Jul 2008

    Posted 26 Nov 2010 Link to this post

    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
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 29 Nov 2010 Link to this post

    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.
  6. Praveen
    Praveen avatar
    1 posts
    Member since:
    Dec 2011

    Posted 07 Dec 2011 Link to this post

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

     

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017