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

DatePicker showing up underneath pop up window

10 Answers 1040 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Derek
Top achievements
Rank 1
Derek asked on 09 Jul 2008, 05:44 PM
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.  :)

10 Answers, 1 is accepted

Sort by
0
david
Top achievements
Rank 1
answered on 23 Jul 2008, 02:57 PM
Where you set the z-index ?
0
david
Top achievements
Rank 1
answered on 23 Jul 2008, 02:58 PM
Where you set the z-index ?
0
Nick
Top achievements
Rank 1
answered on 31 Jul 2008, 04:38 PM
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
0
Princy
Top achievements
Rank 2
answered on 08 Aug 2008, 12:06 PM
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.
 
0
Seth
Top achievements
Rank 1
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
0
Dimo
Telerik team
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.
0
Seth
Top achievements
Rank 1
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;"

0
Dimo
Telerik team
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.
0
Anthony
Top achievements
Rank 1
answered on 30 Sep 2010, 01:31 PM
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
0
Dimo
Telerik team
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
Tags
Calendar
Asked by
Derek
Top achievements
Rank 1
Answers by
david
Top achievements
Rank 1
Nick
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Seth
Top achievements
Rank 1
Dimo
Telerik team
Anthony
Top achievements
Rank 1
Share this question
or