DatePicker on ModalPopupExtender

[Rodney]

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>

[Viktor Tachev]

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.

• http://demos.telerik.com/aspnet-ajax/window/examples/overview/defaultcs.aspx

Regards,
Viktor Tachev
Telerik

[Rodney]

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

[Marin Bratanov]

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

[Rodney]

Thanks, that is exactly the information I had been Googling for. I think I can make that work.