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