RadTimePicker + ModalPopupExtender time list behind background

4 posts, 1 answers
  1. Dédé
    Dédé avatar
    60 posts
    Member since:
    May 2009

    Posted 29 May 2009 Link to this post

    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.
  2. Dédé
    Dédé avatar
    60 posts
    Member since:
    May 2009

    Posted 29 May 2009 Link to this post

    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> 
     

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 29 May 2009 Link to this post

    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.
  5. Dédé
    Dédé avatar
    60 posts
    Member since:
    May 2009

    Posted 29 May 2009 Link to this post

    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(thisthis.GetType(), "zorderfix", func_body, true); 
     

Back to Top