DatePicker showing up underneath pop up window

11 posts, 0 answers
  1. Derek
    Derek avatar
    12 posts
    Member since:
    Mar 2008

    Posted 09 Jul 2008 Link to this post

    I was wondering how I might be able to fix the datepicker so it pops up on top of a RadGrid pop-up edit window, it seems to go behind the window.  :(



    Update: Nevermind, found my answer with changing the z-index of the calendar control.  :)
  2. david
    david avatar
    3 posts
    Member since:
    Jul 2012

    Posted 23 Jul 2008 Link to this post

    Where you set the z-index ?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. david
    david avatar
    3 posts
    Member since:
    Jul 2012

    Posted 23 Jul 2008 Link to this post

    Where you set the z-index ?
  5. Nick
    Nick avatar
    86 posts
    Member since:
    Mar 2008

    Posted 31 Jul 2008 Link to this post

    Hi, I have the same issue, using the ModalPopupExtender from the ASP.NET Ajax Toolkit, the calendar renders under the popup panel.

    How did you set the z-index of the calendar so it appears above the popup?

    Cheers,
    Nick
  6. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 08 Aug 2008 Link to this post

    Hello Nick,

    You can go through the following link which explains about setting the z-index property of  Telerik controls.
    Controlling absolute positioning with z-index

    Thanks
    Princy.
     
  7. Seth
    Seth avatar
    3 posts
    Member since:
    May 2008

    Posted 12 Aug 2008 Link to this post

    So, is there a way to programatically set the z-index of the calendar/time popups via javascript? Say for instance by overriding this: Telerik.Web.UI.Calendar.Popup.zIndex=5000; and setting it to something higher, such as 14000?

    I tried adding the following to an onload function of the <script> section of my default.aspx page; it tells me Telerik.Web.UI.Calendar.Popup is basically unknown or undefined:

    Type.registerNamespace("Telerik.Web.UI.Calendar");
    Telerik.Web.UI.Calendar.Popup=function(){
        this.DomElement=null;
        this.ExcludeFromHiding=[];
    };
    Telerik.Web.UI.Calendar.Popup.zIndex=14000;

    I really need to be able to over-ride default z-index of ALL calendar/time popups to start at 14000.

    Thanks!
    Seth
  8. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 12 Aug 2008 Link to this post

    Hi Seth,

    You can change the zIndex value in the Telerik.Web.UI.Calendar namespace, but I guess you are trying to do this too early, before the namespace is registered. This piece of Javascript should work:


    Sys.Application.add_load(changeZIndex); 
     
    function changeZIndex() 
        window.Telerik.Web.UI.Calendar.Popup.zIndex = 14000; 


    We are considering adding some CSS classes to the popup elements, so that their z-index can also be set more conveniently with external CSS rules.


    Best wishes,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  9. Seth
    Seth avatar
    3 posts
    Member since:
    May 2008

    Posted 12 Aug 2008 Link to this post

    Dimo,

    Thanks for the response. However, I'm still getting null or not defined errors for that block of code you provided. Here is a bit more expanded bit of code; this sits in my default.aspx. The code you provided is near the bottom.

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

        <script type="text/javascript" language="javascript">
        function InitializeAdministration()
        {
            if (typeof(MedSeek.Portal.Administration) !== "undefined") return;
           
            var controlIds = {
                contentEditorId : '<%=RadEditorContent.ClientID%>',
                btnUploadFile: '<%= BtnUpload.ClientID %>'
            };              

            if (MedSeek.Portal.Cms._splitBar !== undefined)
                MedSeek.Portal.Cms.SplitBar = new MedSeek.Portal.Cms._splitBar('<%= PnlSplitBar.ClientID %>');

            MedSeek.Portal.Administration = new MedSeek.Portal._administration(controlIds, <%= CanEditPages.ToString().ToLower() %>, <%= IsEnterpriseAdmin.ToString().ToLower() %>);

            if (typeof(InitModuleControlsList) !== "undefined") InitModuleControlsList();
        }

        Sys.Application.add_load(changeZIndex);
         
        function changeZIndex()
        {
            Type.registerNamespace("Telerik.Web.UI.Calendar");
            window.Telerik.Web.UI.Calendar.Popup.zIndex = 14000;
        }
       
        Sys.Application.add_load(InitializeAdministration);
        </script>

    </telerik:RadCodeBlock>

    Also, the error I'm getting via firebug is:
    window.Telerik.Web.UI.Calendar.Popup is undefined
    "window.Telerik.Web.UI.Calendar.Popup.zIndex = 14000;"

  10. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 13 Aug 2008 Link to this post

    Hi Seth,

    Here is a sample web page, which works as expected. Please compare with yours and try to find out what causes troubles. If you need further advice, please send us a working example, so that we can research locally.

    <%@ Page Language="C#" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>RadCalendar for ASP.NET AJAX</title> 
    </head> 
    <body> 
    <form id="form1" runat="server"
    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
     
    <telerik:RadDatePicker ID="RadDatePicker1" runat="server" /> 
     
    <script type="text/javascript"
    Sys.Application.add_load(changeZIndex); 
    function changeZIndex() 
        Type.registerNamespace("Telerik.Web.UI.Calendar"); 
        window.Telerik.Web.UI.Calendar.Popup.zIndex = 14000
    </script> 
     
    </form> 
    </body> 
    </html> 
     


    Regards,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  11. Anthony
    Anthony avatar
    26 posts
    Member since:
    Mar 2009

    Posted 30 Sep 2010 Link to this post

    Hi Guys,

    Is it possible to set the z-index property of a GridDateTimeColumn ?

    I have a RadGrid  that is within ModalPopupExtender from the ASP.NET Ajax Toolkit, the grid its self renders correctly and as expected however when i select the datepicker the calendar displays below the popup window.

    I have looked at setting the z-index but the GridDateTimeColumn does not have a style property.  Is there a way to do this or is there a workaround to achieve the same.

    Thanks
  12. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 30 Sep 2010 Link to this post

    Hi Anthony,

    There is no ZIndex property for the GridDateTimeColumn. Are you talking about the filtering RadDatePicker or the editing RadDatePicker? In any case, you can reference the picker control in the RadGrid's ItemCreated event and set the ZIndex property to the datepicker directly. Here is how to access the datepicker via its parent cell by using the GridDateTimeColumn's UniqueName.

    http://www.telerik.com/help/aspnet-ajax/grdaccessingcellsandrows.html

    Alternatively, use the workaround provided in my earlier post, it should work.

    Regards,
    Dimo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017