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

Open RadDatePicker calendar popup above instead of below

5 Answers 283 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Dave
Top achievements
Rank 1
Dave asked on 03 Jul 2008, 06:52 PM
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.

5 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 04 Jul 2008, 07:26 AM
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
0
Grendizer
Top achievements
Rank 1
answered on 17 Nov 2008, 08:43 AM
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.
0
Princy
Top achievements
Rank 2
answered on 17 Nov 2008, 01:25 PM
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.
0
Grendizer
Top achievements
Rank 1
answered on 17 Nov 2008, 03:49 PM
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.
0
Daniel
Telerik team
answered on 18 Nov 2008, 01:28 PM
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.
Tags
Calendar
Asked by
Dave
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Grendizer
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Share this question
or