Telerik DatePicker not displaying in modal popup window.

4 posts, 0 answers
  1. Manish
    Manish avatar
    5 posts
    Member since:
    Apr 2012

    Posted 30 Apr 2012 Link to this post

    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>
  2. Manish
    Manish avatar
    5 posts
    Member since:
    Apr 2012

    Posted 03 May 2012 Link to this post

    Telerik support people, can you please reply?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 08 May 2012 Link to this post

    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.
  5. Manish
    Manish avatar
    5 posts
    Member since:
    Apr 2012

    Posted 08 May 2012 Link to this post

    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.
Back to Top