Fixed Size RadWindow with RadDatePicker

[Vic]

I have a fixed size RadWindow opening as a modal popup window for my application.  Within this window I have multiple time/date pickers with some near the edge of the window, how can i make the calendar or time popup float above the window rather than make the window's scroll bars appear?  is it even possible since the window is an iFrame and the popups are within the frame?

[Georgi Tunev]

Hello Vic,

The RadWindow control is basically an IFRAME and you cannot have DHTML elements "bleed" trough that IFRAME. What I can suggest is to try the approach used in this demo. There we are using the OnPopupOpening and OnPopupClosing event handlers of the RadDatePicker control and call the autoSize() method of the window object with a small timeout.

I hope this helps.

Kind regards,
Georgi Tunev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Vic]

I'd rather not expand the size of my window like that.  It is possible for me to fit the popup within the window, is there a way of intercepting the OnPopupOpening event to change the position of the control?  Perhaps to set it to the center of the window?  i have tried a few different methods but cannot get it to work with errors from recursion to it just not moving. 

[Shinu]

Hello Vic,

It is possible to customize the pop-up calendar location of RadDatePicker by passing a pair of coordinates to the showPopup method that determines where the calendar will be displayed.

ASPX:

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

C#:

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

JavaScript:

<script type="text/javascript">
function PopupLoc(e, pickerID)
{
    datePicker = $find("<%= RadDatePicker1.ClientID %>");
    datePicker.showPopup(10, 200);   // Set the position
}
</script>

Also checkout the following demo for more information:
Calendar / Client-side API

-Shinu.