This is a migrated thread and some comments may be shown as answers.

DatePicker showing up underneath pop up window

10 Answers 719 Views

Calendar

This is a migrated thread and some comments may be shown as answers.

10 Answers, 1 is accepted

answered on 12 Aug 2008, 02:14 PM

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

answered on 12 Aug 2008, 06:50 PM

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.

answered on 12 Aug 2008, 07:35 PM

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;"

answered on 13 Aug 2008, 01:17 PM

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.

answered on 30 Sep 2010, 02:58 PM

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

DatePicker showing up underneath pop up window

10 Answers, 1 is accepted