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

Telerik DatePicker not displaying in modal popup window.

3 Answers 421 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Manish
Top achievements
Rank 1
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

Sort by
0
Manish
Top achievements
Rank 1
answered on 03 May 2012, 12:32 PM
Telerik support people, can you please reply?
0
Tsvetina
Telerik team
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.
0
Manish
Top achievements
Rank 1
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.
Tags
Calendar
Asked by
Manish
Top achievements
Rank 1
Answers by
Manish
Top achievements
Rank 1
Tsvetina
Telerik team
Share this question
or