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

RadDatePicker on a modal popup

9 Answers 338 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Thomas Scheelhardt
Top achievements
Rank 1
Thomas Scheelhardt asked on 09 Sep 2008, 01:40 PM
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

9 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 09 Sep 2008, 01:55 PM
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.
0
Thomas Scheelhardt
Top achievements
Rank 1
answered on 10 Sep 2008, 06:53 AM
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
0
Richard
Top achievements
Rank 1
answered on 15 Nov 2010, 07:40 PM
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" />

 

0
Ayman
Top achievements
Rank 1
answered on 20 Mar 2011, 10:01 AM
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
0
Naveen
Top achievements
Rank 1
answered on 24 Aug 2012, 05:37 PM
Worked for me ....Great .Saved lot of time
0
sri
Top achievements
Rank 1
answered on 03 Jul 2013, 04:08 AM
.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....


0
Princy
Top achievements
Rank 1
answered on 03 Jul 2013, 07:37 AM
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.
0
sri
Top achievements
Rank 1
answered on 03 Jul 2013, 09:59 AM
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
0
abhishek
Top achievements
Rank 1
answered on 07 Feb 2019, 01:36 PM
Thanks Princy, its working fine for me now . :)
Tags
Calendar
Asked by
Thomas Scheelhardt
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Thomas Scheelhardt
Top achievements
Rank 1
Richard
Top achievements
Rank 1
Ayman
Top achievements
Rank 1
Naveen
Top achievements
Rank 1
sri
Top achievements
Rank 1
Princy
Top achievements
Rank 1
abhishek
Top achievements
Rank 1
Share this question
or