Controlling popup calendar position

[RJ]

Hi All,

 I just want to ask on how to control the position of the popup calendar. I have a date filter which is aligned to the right of the page and whenever I click on the date picker the popup calendar is being cutoff to the right side of the page. Is there a way to control the position of the calender via x,y, and z position.

Thanks in advance,
Rj

[Shinu]

Hi,

Customizing the popup position is done by passing a pair of coordinates to the ShowPopup method that determines where the calendar will be displayed on clicking the DatePopupButton of the RadDatePicker. You need to register the custom JS method 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>

JavaScript:

<script type="text/javascript">
    function PopupAbove(e, pickerID) {
        var datePicker;
        if (pickerID == null) {
            datePicker = $find("<%= RadDatePicker1.ClientID %>");
        }
        else {
            datePicker = $find(pickerID);
        }
        datePicker.showPopup(positionX, positionY); //set your custom coordinates
    }
</script>

C#:

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

Thanks,
Shinu.

[RJ]

Hi Shinu thanks for the code. It works well when the button is visible. But how can I do it when I dont show the button?

<telerik:RadDatePicker ID="RadDatePicker1" runat="server" DatePopupButton-Visible="false" ShowPopupOnFocus="true"></telerik:RadDatePicker>

 

Tried

RadDatePicker1.Attributes.Add("onClick", "PopupAbove(event, '" + RadDatePicker1.ClientID + "');return false;")
and
RadDatePicker1.DateInput.Attributes.Add("onClick", "PopupAbove(event, '" + RadDatePicker1.ClientID + "');return false;")

But it didnt work..


Thanks again

[RJ]

Got it.. it should be onFocus not onClick... Thanks again Shinu..

[Shinu]

Hi RJ,

Since you have hide the date popup button and displaying the popup calendar on focusing the control, you need to change the onclick to onfocus event in the Page_Load. Please check the following C# code. You can use the same JavaScript.

C#:

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

Thanks,
Shinu.