DatePicker on ModalPopupExtender

5 posts, 1 answers
  1. Rodney
    Rodney avatar
    40 posts
    Member since:
    Mar 2015

    Posted 15 Mar Link to this post

    I have created a ModalPopUp Extender with a RadDatePicker on it. I've run into a problem, though, when you try to pick a date, the calendar comes up behind the modal window rather than on top and you cannot pick a date.

    Any thoughts on how to correct this situation would be appreciated. Below is my markup.

       <div id="divConfirmIDES" runat="server">
        <div id="divP3ProfileDate" runat="server">
             <div class="PopupHeader">
                <asp:Label ID="Label1" runat="server" Text="P3 Update Profile Date"></asp:Label>
            </div>
            <div class="floatLeft">
                <label for="rdpPanelP3ProfileDate">P3 Profile Date:</label>
                <telerik:RadDatePicker ID="rdpPanelP3UpdateDate" runat="server">
                    <Calendar runat="server" ShowRowHeaders="false">
                        <SpecialDays>
                            <telerik:RadCalendarDay Repeatable="Today" Date="" IsToday="true">
                                <ItemStyle CssClass="rcToday" />
                            </telerik:RadCalendarDay>
                        </SpecialDays>
                    </Calendar>
                    <DateInput runat="server" DateFormat="dd MMM yyyy" EmptyMessage="DD MMM YYYY"/>
                </telerik:RadDatePicker>
            </div>
            <div class="formRow">
                <asp:Label ID="Label2" runat="server" Style="font-weight: bold"
                    Text='By clicking "Save", you are confirming that the P3 Profile Date is correct.'></asp:Label>
            </div>
            <div class="formRowNoBorder">
                <div class="floatRight">
                    <asp:LinkButton ID="btnOkP3Date" runat="server" OnClick="btnOkP3Date_Click" CssClass="silverButton"><span>Ok</span></asp:LinkButton>
                    <asp:LinkButton ID="btnCancelP3Date" runat="server" CausesValidation="false" CssClass="floatRightLink"><span>Cancel</span></asp:LinkButton>
                </div>
            </div>
        </div>
    </asp:Panel>
    <ajaxtoolkit:ModalPopupExtender ID="mpeConfirmIDES" runat="server" BackgroundCssClass="modalBackground"
        DropShadow="true" TargetControlID="btnFakeConfirmIDES" PopupControlID="pnlConfirmIDES" CancelControlID="btnCancelIDES">
    </ajaxtoolkit:ModalPopupExtender>

  2. Answer
    Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 17 Mar Link to this post

    Hello Rodney,

    In order to show the calendar popup above the popup you can increase the z-index of the Calendar. Try the following CSS:

    .RadCalendarPopup {
        z-index: 20000 !important;
    }


    With that said, please note that using AjaxControlToolkit can break some functionalities of our controls.

    If you would like to add a popup on the page you should consider using the RadWindow control.



    Regards,
    Viktor Tachev
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rodney
    Rodney avatar
    40 posts
    Member since:
    Mar 2015

    Posted 17 Mar in reply to Viktor Tachev Link to this post

    Thank you, this worked just perfect. I know I can run into problems as I have with some other controls.

    I did look at using the RadWindow, but it just seemed very difficult to get my values back into my code behind and closing also seemed to cause me problems in a user control...

    Thanks

  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 18 Mar Link to this post

    Hi Rodney,

    The following article explains how to close a RadWindow from a user control: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/client-side-programming/overview#getting-a-reference-to-a-radwindow-from-controls-in-its-contenttemplate. If the user control is in a content page and not in the <ContentTemplate>, the following approach applies: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/client-side-programming/overview#getting-a-reference-to-a-radwindow-from-its-content-page.

    As for getting values to the server code:

    • if you are using the ContentTemplate your controls must perform a postback and you will have the data on the server, in the context of the main page or the user control (and you can add events and expose properties as with any user control).
    • if you are using a content page, you can choose either of the following (note that you will have the same situation with any popup that opens a page with its own context, including a browser window/tab):
      • perform a postback on the content page to work with the data there if possible, or to store the data (in the Session, for example) so it is available on the main page. Then, use the OnClientClose event of the RadWindow to initiate a postback on the main page (there are many ways to do that, depending on your needs).
      • OR, pass the data as a client-side object (e.g., a string) to the OnClientClose event (see here: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/client-side-programming/events/onclientclose) and initiate a request on the main page. You could store this data in a hidden field, for example so it can travel to the server.

    Regards,

    Marin Bratanov
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  6. Rodney
    Rodney avatar
    40 posts
    Member since:
    Mar 2015

    Posted 18 Mar in reply to Marin Bratanov Link to this post

    Thanks, that is exactly the information I had been Googling for. I think I can make that work. 
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017