[Solved] RadDatePicker - how to open up or down?

[Brett]

I have the RadDatePicker on the site and I am trying to figure out how to give it the option of opening up or down.  Well, how do you specifiy this?  I know that there is supposed to be some kind of option where you popup to open upper left, upper right, lower left or lower right.  I can't seem to find this option anywhere within the control and it is driving me nuts.  Please tell me where exactly to find it in the menu or where I can plug it in on my code.  Thanks!

[Shinu]

Hi Brett,


Customizing the popup logic is done by passing a pair of coordinates to the showPopup method that determines where the calendar will be displayed. The example obtains a reference to RadDateInput's text box and displays the popup above it by using the PopupContainer's height to calculate the position. You need to register the PopupAbove() event with DatePopupButton’s click attribute in order to get it execute on clicking the DatePopup button. Try the following code snippets.

ASPX:

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

C#:

protected void Page_Load(object sender, EventArgs e)
{
    RadDatePicker1.DatePopupButton.Attributes.Add("onclick", "PopupAbove(event, '" + RadDatePicker1.ClientID + "');return false;");
}

JavaScript:

<script type="text/javascript">
function PopupAbove(e, pickerID)
{
    var datePicker;
    if (pickerID == null)
    {
        datePicker = $find("<%= RadDatePicker1.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);
}
</script>

Also checkout the demo which illustrates the functionality.
Calendar / Client-side API

-Shinu.