Modal with ContentTemplate Causes Controls with popups to show in background

[James Daresta]

<telerik:RadWindowManager ID="rwmSalesCallList" runat="server" Style="z-index: 3">
<Windows>
<telerik:RadWindow ID="rwSalesCallList_PDFExport" runat="server"
    OnClientClose="rwSalesCallList_PDFExport_OnClientClose"
    Modal="true"
    AutoSize="true"
    Behaviors="Close"
    ShowOnTopWhenMaximized="false">
<ContentTemplate>
<asp:Panel ID="pSalesCallList_PDFExport" runat="server">
            <asp:ValidationSummary ID="vsReportSelection_Reporting" runat="server"
                        HeaderText="ERROR! The report cannot be generated due to the following reasons:
                        "
                        ValidationGroup="vgReportSelection" CssClass="LabelWarning"
                        ShowMessageBox="true" ShowSummary="false"
                         />
            <table border="0" cellpadding="5" cellspacing="0" class="ContentTableBordered TableCentered" style="border: solid 1px black" width="450">
            <tr>
                <td class="ContentTableCellTitleDark LabelBold LabelMedium " colspan="2" style="background-color: #808080;color: #FFFFFF;font-size: 10pt;font-weight: bold;border-left: #CCCCCC outset 1px;border-right: #CCCCCC outset 2px;border-top: #CCCCCC outset 1px;border-bottom: #CCCCCC outset 2px;vertical-align:top;">
                    <asp:Label ID="lblErrorTitle" runat="server"
                        Text="Select Filter Criteria Below"></asp:Label>
                </td>
            </tr>
            <tr>
                <td class="tableSectionLabelCell" nowrap style="background-color:#d3d3d3;border-left: #cccccc outset 2px;border-right: #cccccc outset 2px;border-top: #cccccc outset 2px;">
                    <asp:Label ID="lblReportSelection_StartDateLabel" runat="server" Text="Start Date:" ViewStateMode="Disabled" ></asp:Label>
                    <asp:RequiredFieldValidator ID="rfvReportSelection_StartDate" runat="server"
                        ErrorMessage="Start Date is required."
                        ToolTip="Start Date is required."
                        Text="*"
                        ControlToValidate="rdpReportSelection_StartDatePicker"
                        InitialValue=""
                        ValidationGroup="vgReportSelection"></asp:RequiredFieldValidator>
                    <asp:comparevalidator id="cvReportSelection_StartDate" runat="server"
                        Operator="DataTypeCheck"
                        ControlToValidate="rdpReportSelection_StartDatePicker"
                        Type="Date"
                        ErrorMessage="The value for Start Date is invalid."
                        ToolTip="The value for Start Date is invalid."
                        Text="*"
                        EnableClientScript="true"
                        ValidationGroup="vgReportSelection"></asp:comparevalidator>
                </td>
                <td class="tableSectionDataCell" style="background-color:#ffffff;border-left: #cccccc outset 2px;border-right: #cccccc outset 2px;border-top: #cccccc outset 2px;word-break :  break-all;">
                    <telerik:RadDatePicker ID="rdpReportSelection_StartDatePicker" runat="server" Style="z-index: 4">
                        <DateInput runat="server" DisplayDateFormat="MM/dd/yyyy" DateFormat="MM/dd/yyyy"></DateInput>
                    </telerik:RadDatePicker>
                </td>
            </tr>
            <tr>
                <td class="tableSectionLabelCell" nowrap style="background-color:#d3d3d3;border-left: #cccccc outset 2px;border-right: #cccccc outset 2px;border-top: #cccccc outset 2px;">
                    <asp:Label ID="lblReportSelection_EndDateLabel" runat="server" Text="End Date:" ViewStateMode="Disabled" ></asp:Label>
                    <asp:RequiredFieldValidator ID="rfvReportSelection_EndDate" runat="server"
                        ErrorMessage="End Date is required."
                        ToolTip="End Date is required."
                        Text="*"
                        ControlToValidate="rdpReportSelection_EndDatePicker"
                        InitialValue=""
                        ValidationGroup="vgReportSelection"></asp:RequiredFieldValidator>
                    <asp:comparevalidator id="cvReportSelection_EndDate" runat="server"
                        Operator="DataTypeCheck"
                        ControlToValidate="rdpReportSelection_EndDatePicker"
                        Type="Date"
                        ErrorMessage="The value for End Date is invalid."
                        ToolTip="The value for End Date is invalid."
                        Text="*"
                        EnableClientScript="true"
                        ValidationGroup="vgReportSelection"></asp:comparevalidator>
                    <asp:comparevalidator id="cvReportSelection_EndDateGreater" runat="server"
                        Operator="GreaterThanEqual"
                        ControlToCompare="rdpReportSelection_StartDatePicker"
                        ControlToValidate="rdpReportSelection_EndDatePicker"
                        Type="Date"
                        ErrorMessage="The value for End Date must be equal or greater than the Start Date."
                        ToolTip="The value for End Date must be equal or greater than the Start Date."
                        Text="*"
                        EnableClientScript="true"
                        ValidationGroup="vgReportSelection"></asp:comparevalidator>

                </td>
                <td class="tableSectionDataCell" style="background-color:#ffffff;border-left: #cccccc outset 2px;border-right: #cccccc outset 2px;border-top: #cccccc outset 2px;word-break :  break-all;">
                    <telerik:RadDatePicker ID="rdpReportSelection_EndDatePicker" runat="server" Style="z-index: 4">
                        <DateInput runat="server" DisplayDateFormat="MM/dd/yyyy" DateFormat="MM/dd/yyyy"></DateInput>
                    </telerik:RadDatePicker>
                </td>
            </tr>
             <tr>
                <td class="tableSectionLabelCell" style="background-color:#d3d3d3;border-left: #cccccc outset 2px;border-right: #cccccc outset 2px;border-top: #cccccc outset 2px;">
                    <asp:Label ID="lblReportSelection_RegionLabel" runat="server"
                        Text="Sales District/Region:" ViewStateMode="Disabled" ></asp:Label>
                </td>
                <td class="tableSectionDataCell" style="background-color:#ffffff;border-left: #cccccc outset 2px;border-right: #cccccc outset 2px;border-top: #cccccc outset 2px;word-break :  break-all;">
                    <telerik:RadComboBox ID="rcbReportSelection_Region" runat="server"
                        DataValueField="Id"
                        DataTextField="Description"
                        AppendDataBoundItems="true"
                        MarkFirstMatch="True" Style="z-index: 5000">
                        <Items>
                        <telerik:RadComboBoxItem runat="server" Text="-- ALL --" Value="-1" />
                        </Items>
                    </telerik:RadComboBox>
                </td>
            </tr>
            <tr>
                <td class="tableSectionLabelCell" style="background-color:#d3d3d3;border-left: #cccccc outset 2px;border-right: #cccccc outset 2px;border-top: #cccccc outset 2px;">
                    <asp:Label ID="lblReportSelection_IndividualLabel" runat="server"
                        Text="Individual:" ViewStateMode="Disabled" ></asp:Label>
                </td>
                <td class="tableSectionDataCell" style="background-color:#ffffff;border-left: #cccccc outset 2px;border-right: #cccccc outset 2px;border-top: #cccccc outset 2px;word-break :  break-all;">
                <telerik:RadComboBox ID="rcbReportSelection_Individual" runat="server"
                    DataValueField="Id"
                    DataTextField="Description"
                    AppendDataBoundItems="true"
                    DropDownWidth="250px"
                    MarkFirstMatch="True" Style="z-index: 5000">
                    <Items>
                    <telerik:RadComboBoxItem runat="server" Text="-- ALL --" Value="-1" />
                    </Items>
                </telerik:RadComboBox>
                </td>
            </tr>
            <tr>
                <td class="tableSectionLabelCell" style="background-color:#d3d3d3;border-left: #cccccc outset 2px;border-right: #cccccc outset 2px;border-top: #cccccc outset 2px;">
                    <asp:Label ID="lblReportSelection_TradingPartnerLabel" runat="server"
                        Text="Trading Partner:" ViewStateMode="Disabled" ></asp:Label>
                </td>
                <td class="tableSectionDataCell" style="background-color:#ffffff;border-left: #cccccc outset 2px;border-right: #cccccc outset 2px;border-top: #cccccc outset 2px;word-break :  break-all;">
                <telerik:RadComboBox ID="rcbReportSelection_TradingPartner" runat="server"
                    DataValueField="TradingPartnerNo"
                    DataTextField="Name"
                    AppendDataBoundItems="true"
                    DropDownWidth="275px"
                    MarkFirstMatch="True" Style="z-index: 5000">
                    <Items>
                    <telerik:RadComboBoxItem runat="server" Text="-- ALL --" Value="" />
                    </Items>
                </telerik:RadComboBox>
                </td>
            </tr>

            <tr>
                <td class="ContentTableCellFooterDark LabelBold LabelMedium TableCellMiddleCenter" colspan="2" style="background-color: #808080;color: #FFFFFF;font-size: 10pt;font-weight: bold;border-left: #CCCCCC outset 1px;border-right: #CCCCCC outset 2px;border-top: #CCCCCC outset 2px;border-bottom: #CCCCCC outset 1px;vertical-align:top;">
                    <telerik:RadButton ID="btnReportSelection_GeneratePDF" runat="server"
                        Text="Generate PDF" CssClass="Button"
                        OnClick="btnReportSelection_GeneratePDF_Click"
                        ValidationGroup="vgReportSelection"
                        OnClientClicking="SubmitAllPDFExport"
                        Icon-PrimaryIconUrl="~/images/icons/acrobat.gif"
                        Icon-PrimaryIconHeight="16px"
                        Icon-PrimaryIconWidth="16px" />
                    <telerik:RadButton ID="btnReportSelection_CancelPDF" runat="server"
                        Text="Cancel" CssClass="Button" OnClientClicking="rwSalesCallList_PDFExport_Close"
                         Icon-PrimaryIconCssClass="rbCancel"/>
                </td>
            </tr>
        </table>
</asp:Panel>
<asp:Panel ID="pSalesCallList_PDFExportWait" runat="server" style="display:none;">
<br />
<br />
<br />
<center><asp:Image ID="imgSalesCallList_MainLoadingPanelDropDown" runat="server" ImageUrl="~/images/loading3.gif" ImageAlign="Bottom" /></center>
</asp:Panel>


</ContentTemplate>
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>

I having a strange problem with using the window control with a content template in modal that controls such as comboboxes, calendars, etc. are appearing behind the window in the shaded modal part. I have tried adjusting the z-indexing of the controls to no avail. Here is the window code and a screen shot of the issue.

​

[Marin Bratanov]

Hello James,

I am attaching here a screenshot with the expected behavior. The z-index rule you have in place should be in effect unless something else on your page is overriding them (e.g., CSS rules for the .RadWindow or .rcbSlide classes).

I also advise that you make sure the page markup is valid, that IE is in Edge mode and that you have no script errors on the page.

You can also try adding a CSS rule for the .rcbSlide class that will increase its z-index accordingly.

On a side note - I advise that you move the RadWindow whose ContentTemplate is used out of a RadWindowManager, as noted at the end of this article: http://www.telerik.com/help/aspnet-ajax/window-controls-container.html.

Regards,

Marin Bratanov
Telerik

 

 

[James Daresta]

I did all you suggested and to no avail. Can you provide some sample code where it works as expected so I can compare? Its odd because if I move it out of the window it works as expected.

[Marin Bratanov]

Hi James,

I used your code, I only added the needed client-side event handlers to prevent errors, and duplicated a combo box item over a few times.

Here is a basic example that works fine for me:

<telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true" Height="200px">
    <ContentTemplate>
        <telerik:RadDatePicker runat="server" ID="RadDatePicker1"></telerik:RadDatePicker>
        <telerik:RadComboBox runat="server" ID="RadComboBox1">
            <Items>
                <telerik:RadComboBoxItem Text="item" />
                <telerik:RadComboBoxItem Text="item" />
                <telerik:RadComboBoxItem Text="item" />
                <telerik:RadComboBoxItem Text="item" />
                <telerik:RadComboBoxItem Text="item" />
                <telerik:RadComboBoxItem Text="item" />
                <telerik:RadComboBoxItem Text="item" />
                <telerik:RadComboBoxItem Text="item" />
                <telerik:RadComboBoxItem Text="item" />
                <telerik:RadComboBoxItem Text="item" />
                <telerik:RadComboBoxItem Text="item" />
                <telerik:RadComboBoxItem Text="item" />
                <telerik:RadComboBoxItem Text="item" />
                <telerik:RadComboBoxItem Text="item" />
                <telerik:RadComboBoxItem Text="item" />
            </Items>
        </telerik:RadComboBox>
    </ContentTemplate>
</telerik:RadWindow>

I advise that you test it on a blank page, preferably outside of your current project first. If you can reproduce an issue there with our latest version, please open a support ticket and send it to us so we can investigate it. If things work fine on a blank test page, but not in your current page, the most likely culprit is some CSS on the page. The steps from this article can help you isolate it: http://www.telerik.com/help/aspnet-ajax/window-troubleshooting-distorted-appearance.html.

Regards,

Marin Bratanov
Telerik

 

 

[James Daresta]

Your last post helped me narrow it down. It was a rad window manager in the master page set at a higher z index and that was causing the issue. Thanks for the help!