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.  :)

Where you set the z-index ?

Where you set the z-index ?

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

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.
 

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

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:




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

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

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.



Regards,
Dimo
the Telerik team

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

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