Open RadDatePicker calendar popup above instead of below

[Dave]

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.

[Daniel]

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

[Grendizer]

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.

[Princy]

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.

[Grendizer]

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.

[Daniel]

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.