RadDatePicker on a modal popup

[Thomas Scheelhardt]

Hi,

I am trying to get the RadDatePicker to work when added to a panel that is shown using the ModalPopupextender (Ajax).
This works fine with other date pickers, but unfortunately the RadDatePicker shows its calendar popup behind the modal window, which of course renders it rather useless.

I hope you can assist with a fix for this issue.

Brgds,
Thomas Scheelhardt

[Dimo]

Hi Thomas,

The reason for the issue is that the z-index of the modal popup is larger than the z-index of the popping Calendar. You have two options:

1) Decrease the z-index of the modal popup.

2) Increase the z-index of the popping Calendar by using the following CSS classes:

.RadCalendarPopup
{
     z-index: 1234  !important;
}

.RadCalendarFastNavPopup
{
     z-index: 5678  !important;
}

Note that you must use !important in order to override the default z-index styles of RadCalendar. In addition, the z-index value of RadCalendarFastNavPopup must be greater than the one for RadCalendarPopup .

The above RadCalendar customization is supported as of Q2 2008 SP1.

For more information about default z-index values of RadControls popping elements, please refer to:

http://www.telerik.com/help/aspnet-ajax/controlling-absolute-positioning-with-zindex.html


Greetings,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Thomas Scheelhardt]

Hi,

Thanks that did the trick.
The values need to be greater than 10000 since the ModalPopupextender sets its z-index at 10000.

That is hardcoded by the way so the only real option is to modify the Rad styles, which works great.

Brgds,
Thomas Scheelhardt
frontAvenue

[Richard]

Just to help with anyone finding this; I tried the above solution through CSS but it didn't seem to work, however in the the current release of the toolkit you can set the Zindex property on the radDatePicker control itself, this worked for me:

<

 

 

telerik:RadDatePicker ID="calConvictionDate" Runat="server" ZIndex="11000" Width="95px" />

 

[Ayman]

Hi all,
i have the same problem :(
after i used the css class ,the RadDatePicker shows its calendar popup above the modal window ,but unfortunately
i can't choose date
????
any help

thanks for advance
Ayman Nabil

[Naveen]

Worked for me ....Great .Saved lot of time

[sri]

.RadCalendarPopup
{
     z-index: 1234  !important;
}

.RadCalendarFastNavPopup
{
     z-index: 5678  !important;
}
the above solution solved the problem for chrome browser and calendar is coming above the modal popup in chrome thanks, but the time picker is not working now, on click of clock icon .this happens only in chrome other browser it works.

please provide a solution asap..
thanks....

[Princy]

Hi Sri,

Please have a look at the following full code i tried which works fine in IE, Firefox and Chrome.

ASPX:

<div>
    <asp:Button ID="Button1" runat="server" Text="Click here to show the modal" />
    <cc1:ModalPopupExtender ID="ModalPopupExtender1" BackgroundCssClass="BackGround"
        runat="server" CancelControlID="btnCancel" OkControlID="btnOkay" TargetControlID="Button1"
        PopupControlID="Panel1" Drag="true" PopupDragHandleControlID="PopupHeader">
    </cc1:ModalPopupExtender>
    <div id="Panel1" class="popupConfirmation">
        Select a Date
        <telerik:RadDatePicker ID="RadDatePicker1" runat="server">
        </telerik:RadDatePicker>
        <br />
        <br />
        <input id="btnOkay" value="Done" type="button" />
        <input id="btnCancel" value="Cancel" type="button" />
    </div>
</div>

CSS:

<style type="text/css">
    .BackGround
    {
        background-color: Gray;
        filter: alpha(opacity=70);
        opacity: 0.7;
        z-index: 100 !important;
    }
    .popupConfirmation
    {
        border: 1px solid Gray;
        background-color: White;
        width: 250px;
        height: 100px;
        padding: 10px 5px 5px 10px;
    }
</style>

Hope this helps,
Princy.

[sri]

thanks princy for your speedy response.
actually the telerik version used here is 2.2.1.0 .
the suggestion u gave is not working only in chrome browser.
also i face another issue where the telerik datetimepicker used in a page(not in modal popup).
loosing its styles on postback of the page. i need a solution for that tooo..

thanks

[abhishek]

Thanks Princy, its working fine for me now . :)