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

Telerik DatePicker not displaying in modal popup window.

3 Answers 954 Views

Calendar

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

Manish asked on 30 Apr 2012, 03:51 PM

Below is the code snippet.
I have tried doing everything from setting the z-index to css. But the issue still persists.

The datepicker calendar is not shown when i try to open in modal popup window.
I am using RadControls_Q1_2007_SP2_dev. My client does not want to upgrade to latest version immediately.
Please help.

<style type="text/css">

.modalBackground

{

background-color: Black;

filter: alpha(opacity=90);

opacity: 0.8;

z-index: 0;

}

.modalPopup

{

background-color: #FFFFFF;

border-width: 3px;

border-style: solid;

border-color: black;

padding-top: 10px;

padding-left: 10px;

width: 720px;

height: 260px;

z-index: 1;

}

.modalPopupAdd

{

background-color: #FFFFFF;

border-width: 3px;

border-style: solid;

border-color: black;

padding-top: 10px;

padding-left: 10px;

width: 720px;

height: 360px;

z-index: 1;

}

.radCalendarPopup

{

z-index: 30000 !important;

}

</style>

<ajax:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:LinkButton ID="lnkAdd" runat="server" Text="Add Ashram Events" OnClick="Add"

CssClass="copy"></asp:LinkButton><br />

<asp:Panel ID="pnlAddEdit" runat="server" CssClass="modalPopup" Style="display: none">

<table width="98%" cellspacing="0" cellpadding="0" class="table-border" id="tblAddEdit"

runat="server" visible="false">

<tr>

<td>

<table width="100%" border="0" cellspacing="0" cellpadding="2" class="main-content">

<tr>

<td>

<table width="100%" border="1" cellspacing="0" cellpadding="2">

<tr>

<td height="25" colspan="4" align="center" class="sub-menu2" style="padding-left: 10px;

background-color: Yellow">

<asp:Label ID="lblHeading" runat="server"></asp:Label>

</td>

</tr>

<tr style="height: 25px">

<td colspan="4" class="sub-menu2" style="padding-left: 10px; color: #790020; background-color: #f9f9f9">

<u>Shibir Details</u>

</td>

</tr>

<tr style="height: 25px">

<td class="sub-menu2" style="padding-left: 10px">

<b>Shibir Type</b> :

</td>

<td colspan="3" class="sub-menu2" style="height: 20px; padding-left: 10px; color: Black;

font-size: 9px; font-family: Verdana, Times New Roman">

<asp:TextBox ID="txtShibirType" runat="server" Width="300px"></asp:TextBox>

</td>

</tr>

<tr style="height: 25px">

<td class="sub-menu2" style="padding-left: 10px">

<b>From Date</b> :

</td>

<td class="sub-menu2" style="padding-left: 10px; color: Black;">

<telerik:RadDatePicker ID="rdpFromDate" Calendar-Skin="WebBlue" runat="server" Width="150px"

DateInput-Enabled="false" ClientEvents-OnPopupOpening="PopupOpening">

<DatePopupButton HoverImageUrl="~/RadControls/Calendar/Skins/Sunny/Img/datePickerPopupHover.gif"

ImageUrl="~/RadControls/Calendar/Skins/Sunny/Img/datePickerPopup.gif"></DatePopupButton>

</telerik:RadDatePicker>

<script type="text/javascript">

function PopupOpening(sender, args) {

Telerik.Web.UI.Calendar.Popup.zIndex = 100100;

}

</script>

</td>

<td class="sub-menu2" style="padding-left: 10px">

<b>To Date</b> :

</td>

<td class="sub-menu2" style="padding-left: 10px; color: Black;">

<telerik:RadDatePicker ID="rdpToDate" Calendar-Skin="WebBlue" runat="server" Width="150px"

DateInput-Enabled="false" ZIndex="11000">

<DatePopupButton HoverImageUrl="~/RadControls/Calendar/Skins/Sunny/Img/datePickerPopupHover.gif"

ImageUrl="~/RadControls/Calendar/Skins/Sunny/Img/datePickerPopup.gif"></DatePopupButton>

</telerik:RadDatePicker>

</td>

</tr>

<tr style="height: 25px">

<td class="sub-menu2" style="padding-left: 10px">

<b>Location</b> :

</td>

<td class="sub-menu2" style="padding-left: 10px; color: Black; font-size: 9px; font-family: Verdana, Times New Roman;">

<asp:TextBox ID="txtLocation" runat="server" Width="175px"></asp:TextBox>

</td>

<td class="sub-menu2" style="padding-left: 10px">

<b>Address</b> :

</td>

<td class="sub-menu2" style="padding-left: 10px; color: Black; font-size: 9px; font-family: Verdana, Times New Roman">

<asp:TextBox ID="txtAddress" runat="server" Width="175px"></asp:TextBox>

</td>

</tr>

<tr style="height: 25px">

<td class="sub-menu2" style="padding-left: 10px">

<b>Shibir Language</b> :

</td>

<td class="sub-menu2" style="padding-left: 10px; color: Black; font-size: 9px; font-family: Verdana, Times New Roman">

<asp:TextBox ID="txtShibirLanguage" runat="server" Width="175px"></asp:TextBox>

</td>

<td class="sub-menu2" style="padding-left: 10px">

<b>Timings</b> :

</td>

<td class="sub-menu2" style="padding-left: 10px; color: Black; font-size: 9px; font-family: Verdana, Times New Roman">

<asp:TextBox ID="txtTimings" runat="server" Width="175px"></asp:TextBox>

</td>

</tr>

<tr style="height: 25px">

<td class="sub-menu2" style="padding-left: 10px">

<b>Last Date of Registration</b> :

</td>

<td colspan="3" height="40" class="sub-menu2" style="padding-left: 10px; color: Black;">

<telerik:RadDatePicker ID="rdpRegistrationLastDate" Calendar-Skin="WebBlue" runat="server"

Width="150px" DateInput-Enabled="false" ZIndex="11000">

<DatePopupButton HoverImageUrl="~/RadControls/Calendar/Skins/Sunny/Img/datePickerPopupHover.gif"

ImageUrl="~/RadControls/Calendar/Skins/Sunny/Img/datePickerPopup.gif"></DatePopupButton>

</telerik:RadDatePicker>

</td>

</tr>

<tr style="height: 25px">

<td colspan="4" class="sub-menu2" style="padding-left: 10px; color: #790020; background-color: #f9f9f9">

<u>Other Details</u>

</td>

</tr>

<tr style="height: 25px">

<td class="sub-menu2" style="padding-left: 10px">

<b>Contact Person</b> :

</td>

<td class="sub-menu2" style="padding-left: 10px; color: Black; font-size: 9px; font-family: Verdana, Times New Roman">

<asp:TextBox ID="txtContactPerson" runat="server" Width="175px"></asp:TextBox>

</td>

<td class="sub-menu2" style="padding-left: 10px">

<b>Contact Details</b> :

</td>

<td class="sub-menu2" style="padding-left: 10px; color: Black; font-size: 9px; font-family: Verdana, Times New Roman">

<asp:TextBox ID="txtContactDetails" runat="server" Width="175px"></asp:TextBox>

</td>

</tr>

<tr style="height: 25px">

<td class="sub-menu2" style="padding-left: 10px">

<b>Other Details</b> :

</td>

<td colspan="3" height="40" class="sub-menu2" style="padding-left: 10px; color: Black;

font-size: 9px; font-family: Verdana, Times New Roman">

<asp:TextBox ID="txtOtherDetails" runat="server" Width="450px" TextMode="MultiLine"></asp:TextBox>

</td>

</tr>

<tr>

<td colspan="4" align="center">

<asp:Button ID="btnSave" runat="server" Text="Save" />

<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClientClick="return Hidepopup()" />

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</asp:Panel>

<asp:LinkButton ID="lnkFake" runat="server"></asp:LinkButton>

<ajaxToolkit:ModalPopupExtender ID="popup" runat="server" DropShadow="false" PopupControlID="pnlAddEdit"

TargetControlID="lnkFake" BackgroundCssClass="modalBackground">

</ajaxToolkit:ModalPopupExtender>

</ContentTemplate>

<Triggers>

<ajax:AsyncPostBackTrigger ControlID="dgAshramEvents" />

<ajax:AsyncPostBackTrigger ControlID="btnSave" />

</Triggers>

</ajax:UpdatePanel>

3 Answers, 1 is accepted

answered on 08 May 2012, 07:57 AM

Hello Manish,

You can find an explanation on why this happens and possible ways to fix it here:
http://www.telerik.com/community/forums/aspnet-ajax/ajax/datepicker-ignores-z-index.aspx#609291

In your case,the following CSS should do the trick:

.modalBackground

{

background-color: Black;

filter: alpha(opacity=90);

opacity: 0.8;

z-index: 4998 !important;

}

#pnlAddEdit

{

z-index: 4999 !important;

}

The !important is needed as both element's z-indexes are set inline by the toolkit.

Kind regards,
Tsvetina
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 08 May 2012, 10:30 AM

Actually, there was a function which i was calling on onLoad event.

window.onLoad = function(

RadCalendarNamespace.Popup.zIndex = 200000;

)

When Ajax Update panel was fired, this event was not called again. Hence, the RateDateCalendar was not visible at all.

Now, I am calling that function on

Sys.Application.add_load(IncreaseZIndex);

function IncreaseZIndex() {

RadCalendarNamespace.Popup.zIndex = 200000;

}

Calling that function on Sys.Application.add_load enabled the function to be called on partial postback. Hence, the z-index was set again.

It is working fine now.