Open RadDatePicker calendar popup above instead of below

6 posts, 0 answers
  1. Dave Durose
    Dave Durose avatar
    44 posts
    Member since:
    Jan 2008

    Posted 03 Jul 2008 Link to this post

    How do you have the calendar popup open above the DateInput field instead of below?  The problem I'm having is that I have a RadDatePicker control as the last element on my form and when I click the icon, the calendar popup actually gets cut off at the bottom of the screen.  I figure if the calendar popup opens above instead of below, the problem will be solved.  Even better would be if the popup determined automatically that it would be cut off by the bottom of the screen and just automatically made it show up above the dateinput field.
  2. Daniel
    Admin
    Daniel avatar
    4949 posts

    Posted 04 Jul 2008 Link to this post

    Hi Dave,

    You can find an article concerning your question here: Displaying The Popup Above The Input Area

    Best regards,
    Daniel
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Grendizer
    Grendizer avatar
    51 posts
    Member since:
    Sep 2008

    Posted 17 Nov 2008 Link to this post

    Hello Daniel,

    sorry to raise back an old post ... we use provided sample code @ http://www.telerik.com/help/aspnet-ajax/calendar_howtodisplayingthepopupabovetheinputarea.html as suggested.

    then we use following code inspired from the provided samples

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

        <script type="text/javascript">

            function ShowPopupAbove(sender, pickerID)

            {

                var datePicker;

                if (pickerID == null)

                {

                    datePicker = $find("<%= cdpDocDate.ClientID %>");

                }

                else

                {

                    datePicker = $find(pickerID);

                }

                var textBox = datePicker.get_textBox();

                var popupElement = datePicker.get_popupContainer();

                var dimensions = datePicker.getElementDimensions(popupElement);

                var position = datePicker.getElementPosition(textBox);

                datePicker.showPopup(position.x, position.y - dimensions.height - 20);

            }

        </script>

    </telerik:RadCodeBlock>

    <telerik:RadDatePicker ID="cdpDocDate" runat="server"/>


    with event register in code behind

    protected override void OnLoad(EventArgs e)

            {

                base.OnLoad(e);

                 cdpDocDate.DatePopupButton.Attributes.Add("onclick", "ShowPopupAbove(event, '" + cdpDocDate.ClientID + "')");

            }


    .. but this is not working ...
    we have a margin of something like almost 30px between the bottom of the Calendar & the top of the input box.

    Note : the provided code is working fine for RadDateTimePicker but not for RadDatePicker.

    Thanks in advance for your support.
  4. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 Nov 2008 Link to this post

    Hi Grendizer,

    I have tested your code and this is working fine on my end. So could you check the RadControl version that you are using?. Please refer the below link also.

    Client-side API - Pop-up above input textbox.

    Thanks,
    Princy.
  5. Grendizer
    Grendizer avatar
    51 posts
    Member since:
    Sep 2008

    Posted 17 Nov 2008 Link to this post

    Hello Princy,

    thanks for your quick answer.

    it seems that your sample is working .. but my issue is that the provided code doesn't seems to be up-to-date.

    If you have a look to the statement :

    var datePicker = <%= RadDatePicker1.ClientID %>;

    The $find command seems to be missing ... same for 

    var textBox = datePicker.GetTextBox();

    does the valid statement wouldn't be : var textBox = datePicker.get_TextBox();

    I don't know if it was clear for you that I'm working with Prometheus build 1001.

    Thanks in advance for your answer.
  6. Daniel
    Admin
    Daniel avatar
    4949 posts

    Posted 18 Nov 2008 Link to this post

    Hello Grendizer,

    The correct link for RadControls for ASP.NET AJAX suite is shown below:
    Client-side API

    I hope this helps.

    Kind regards,
    Daniel
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top