RadTimePicker + ModalPopupExtender time list behind background

[Dédé]

Hi,

I am using a RadTimePicker inside a Panel that is shown with a ModalPopupExtender (AjaxControlToolkit).

When I click the clock to show time list, the list is spawned behind the modalpopup, and can't be accessed...

If this is normal behavior due to conflicting between Telerik and AjaxControlToolkit, how can I replace the ModalPopupExtender with Telerik's controls to have same behavior without rewriting my code ?

Thanks.

[Dédé]

Minimal sample code :

<style type="text/css">
.modalBackground {
    background-color:Gray;
    filter:alpha(opacity=70);
    opacity:0.7;
}
</style>
<asp:Button ID="btnPopup" runat="server" Text="Popup" />
<ajaxToolkit:ModalPopupExtender ID="ext" runat="server" TargetControlID="btnPopup" PopupControlID="panPopup" BackgroundCssClass="modalBackground" />
<asp:Panel ID="panPopup" runat="server" BackColor="White">
    <telerik:RadTimePicker ID="pikTime" runat="server" />
</asp:Panel>

[Dimo]

Hi Damien,

The default z-index of the ModalPopupExtender is 100001, which is more than the picker's z-index. In order to make the RadDatePicker popups appear above the modal popup, you need to reduce the z-index of the modal popup or increase the z-index of the popping Calendar / TimeView controls. There are three alternative ways to do the latter:

http://www.telerik.com/community/forums/aspnet-ajax/calendar/datepicker-showing-up-underneath-pop-up-window.aspx#606838

or

http://www.telerik.com/community/forums/aspnet/calendar/raddatepicker-and-modalpopupextender-css-help.aspx#686393

or

http://www.telerik.com/community/forums/aspnet-ajax/calendar/raddatepicker-on-a-modal-popup.aspx#625807


Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Dédé]

Thanks.

I have choosen the javascript way, but in codebehind :

protected void Page_Load(object sender, EventArgs e)
{
    string func_body = @"Type.registerNamespace('Telerik.Web.UI.Calendar'); window.Telerik.Web.UI.Calendar.Popup.zIndex = 14000;";
    ScriptManager.RegisterStartupScript(this, this.GetType(), "zorderfix", func_body, true);
}