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

Modal with ContentTemplate Causes Controls with popups to show in background

4 Answers 163 Views

Window

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

James Daresta asked on 02 Mar 2015, 08:44 PM

modalproblem.jpg

<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 />

<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.

4 Answers, 1 is accepted

answered on 04 Mar 2015, 01:08 PM

expected.png

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

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Accepted

answered on 04 Mar 2015, 03:59 PM

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" />

</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

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.