following the Maria Ilieva's post in "DatePicker ignores z-index?" I observed that a TelerikModalOverlay is being created and assigned the zIndex value which is specified to the calendar popup (this effectively overlays the invoked RadWindow). Additionally, the zIndex of Overlay accumulates each time any RadWindow is closed and invoked again.
This occurs when a target radWindow is minimized, restored, closed, and invoked again. (There are steps below)
In the following code, just change the Page Directive "Payroll.Presetnation.Web.App2.testarea.Default" to the proper class in your code CodeBehind file.
The quickest way to observe the issue:
Load the page,
Click on 'Welcome' button (this invokes RadWindow => rWinControlPanel using OnClientClicking)
Click on either Button within the ControlPanelWindow (the new RadWindow will open in maximum).
Click on the minimize icon.
Click on the restore icon (to the right of the minimize icon) (note: it does not return to window.maximum)
Click the close button
Click on either Button within the ControlPanelWindow again.
This occurs when a target radWindow is minimized, restored, closed, and invoked again. (There are steps below)
In the following code, just change the Page Directive "Payroll.Presetnation.Web.App2.testarea.Default" to the proper class in your code CodeBehind file.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Payroll.Presentation.Web.App2.testarea.Default" %>
<!DOCTYPE html>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
></
title
>
</
head
>
<
body
>
<
header
>
<
telerik:RadAjaxPanel
ID
=
"radAjaxPanelControlPanel"
runat
=
"server"
>
<
telerik:RadButton
ID
=
"btnControlPanelPopupInvoker"
runat
=
"server"
OnClientClicking
=
"openControlPanelWindow"
AutoPostBack
=
"false"
Text
=
"Welcome"
></
telerik:RadButton
>
</
telerik:RadAjaxPanel
>
<%--<
telerik:RadToolTip
ID
=
"radToolTipControlPanel"
runat
=
"server"
TargetControlID
=
"btnControlPanelPopupInvoker"
ManualClose
=
"true"
ShowEvent
=
"OnClick"
OnClientBeforeShow
=
"ToggleCover"
OnClientHide
=
"ToggleCover"
>
<
div
>
</
div
>
</
telerik:RadToolTip
>--%>
</
header
>
<
main
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
runat
=
"server"
ID
=
"RadScriptManager1"
>
<
Scripts
>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.Core.js"
/>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQuery.js"
/>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQueryInclude.js"
/>
</
Scripts
>
</
telerik:RadScriptManager
>
<
div
>
<
telerik:RadWindow
ID
=
"rWinUsers"
runat
=
"server"
Modal
=
"true"
Width
=
"80%"
>
<
ContentTemplate
>
<
div
>
<
div
>
<
label
>Select to Edit</
label
>
<
telerik:RadListBox
ID
=
"lbxUsers"
runat
=
"server"
AutoPostBack
=
"false"
>
<
ItemTemplate
>
<
telerik:RadButton
ID
=
"UserItem"
runat
=
"server"
AutoPostBack
=
"false"
></
telerik:RadButton
>
</
ItemTemplate
>
</
telerik:RadListBox
>
</
div
>
<
div
>
<
div
><
label
>Email Address (Login)</
label
><
telerik:RadTextBox
ID
=
"tbUserEmailAddress"
runat
=
"server"
AutoPostBack
=
"false"
></
telerik:RadTextBox
></
div
>
<
div
><
label
>First Name</
label
><
telerik:RadTextBox
ID
=
"tbUserFirstName"
runat
=
"server"
AutoPostBack
=
"false"
></
telerik:RadTextBox
></
div
>
<
div
><
label
>Last Name</
label
><
telerik:RadTextBox
ID
=
"tbUserLastName"
runat
=
"server"
AutoPostBack
=
"false"
></
telerik:RadTextBox
></
div
>
<
div
><
label
>Password</
label
><
telerik:RadTextBox
ID
=
"tbUserPassword"
runat
=
"server"
AutoPostBack
=
"false"
></
telerik:RadTextBox
></
div
>
<
div
><
label
>Confirm Password</
label
><
telerik:RadTextBox
ID
=
"tbUserPasswordConfirm"
runat
=
"server"
AutoPostBack
=
"false"
></
telerik:RadTextBox
></
div
>
<
div
>
<
telerik:RadButton
ID
=
"chkboxUserActive"
runat
=
"server"
ButtonType
=
"ToggleButton"
ToggleType
=
"CheckBox"
AutoPostBack
=
"false"
>
<
ToggleStates
>
<
telerik:RadButtonToggleState
Text
=
"Active"
Value
=
"1"
/>
<
telerik:RadButtonToggleState
Text
=
"Inactive"
Value
=
"0"
/>
</
ToggleStates
>
</
telerik:RadButton
>
</
div
>
</
div
>
<
div
>
<
label
>User Role(s)</
label
>
<
telerik:RadListBox
ID
=
"lbxUserRoles"
runat
=
"server"
AutoPostBack
=
"false"
>
<
ItemTemplate
>
<
telerik:RadButton
AutoPostBack
=
"false"
ButtonType
=
"ToggleButton"
ToggleType
=
"CheckBox"
GroupName
=
"UserRoleGroup"
ID
=
"UserItem"
runat
=
"server"
></
telerik:RadButton
>
</
ItemTemplate
>
</
telerik:RadListBox
>
</
div
>
</
div
>
</
ContentTemplate
>
</
telerik:RadWindow
>
<
telerik:RadWindow
ID
=
"rWinEmployees"
runat
=
"server"
Modal
=
"true"
Width
=
"80%"
>
<
ContentTemplate
>
<
div
>
<
div
>
<
div
><
label
>First Name</
label
><
telerik:RadTextBox
ID
=
"btnEmployeeFirstName"
runat
=
"server"
AutoPostBack
=
"false"
></
telerik:RadTextBox
></
div
>
<
div
><
label
>Last Name</
label
><
telerik:RadTextBox
ID
=
"btnEmployeeLastName"
runat
=
"server"
AutoPostBack
=
"false"
></
telerik:RadTextBox
></
div
>
<
div
><
telerik:RadButton
ID
=
"chkboxEmployeeActive"
runat
=
"server"
ButtonType
=
"ToggleButton"
ToggleType
=
"CheckBox"
AutoPostBack
=
"false"
>
<
ToggleStates
>
<
telerik:RadButtonToggleState
Text
=
"Active"
Value
=
"1"
/>
<
telerik:RadButtonToggleState
Text
=
"Inactive"
Value
=
"0"
/>
</
ToggleStates
>
</
telerik:RadButton
></
div
>
<
div
><
label
>Middle Name</
label
><
telerik:RadTextBox
ID
=
"btnEmployeeMiddleName"
runat
=
"server"
AutoPostBack
=
"false"
></
telerik:RadTextBox
></
div
>
<
div
><
label
>Suffix</
label
><
telerik:RadTextBox
ID
=
"btnEmployeeNameSuffix"
runat
=
"server"
AutoPostBack
=
"false"
></
telerik:RadTextBox
></
div
>
<
div
><
label
>Email Address</
label
><
telerik:RadTextBox
ID
=
"btnEmployeePrimaryEmailAdresss"
runat
=
"server"
AutoPostBack
=
"false"
></
telerik:RadTextBox
></
div
>
<
div
><
label
>Internal ID</
label
><
telerik:RadTextBox
ID
=
"btnEmployeeInternalID"
runat
=
"server"
AutoPostBack
=
"false"
></
telerik:RadTextBox
></
div
>
<
div
><
label
>Date of Hire</
label
>
<
telerik:RadDatePicker
AutoPostBack
=
"false"
ID
=
"rdateEmployeeDateOfHire"
runat
=
"server"
>
<
Calendar
>
</
Calendar
>
</
telerik:RadDatePicker
>
</
div
>
<
div
><
label
>Seniority Date</
label
>
<
telerik:RadDatePicker
AutoPostBack
=
"false"
ID
=
"rdateEmployeeSeniorityDate"
runat
=
"server"
>
<
Calendar
>
</
Calendar
>
</
telerik:RadDatePicker
>
</
div
>
<
div
><
label
>Termination Date</
label
>
<
telerik:RadDatePicker
AutoPostBack
=
"false"
ID
=
"rdateEmployeeTerminationDate"
runat
=
"server"
>
<
Calendar
>
</
Calendar
>
</
telerik:RadDatePicker
>
</
div
>
<
div
><
label
>Country of Residence</
label
><
telerik:RadTextBox
ID
=
"btnEmployeeCountryOfResidence"
runat
=
"server"
AutoPostBack
=
"false"
></
telerik:RadTextBox
></
div
>
<
div
><
label
>Paid By Wire</
label
>
<
telerik:RadButton
AutoPostBack
=
"false"
ID
=
"btnEmployeePaidByWireYes"
runat
=
"server"
ButtonType
=
"ToggleButton"
ToggleType
=
"Radio"
GroupName
=
"EmployeePaidByWireGroup"
>
<
ToggleStates
>
<
telerik:RadButtonToggleState
Text
=
"Yes"
Value
=
"1"
/>
<
telerik:RadButtonToggleState
Text
=
"Yes"
Value
=
"0"
/>
</
ToggleStates
>
</
telerik:RadButton
>
<
telerik:RadButton
AutoPostBack
=
"false"
ID
=
"btnEmployeePaidByWireNo"
runat
=
"server"
ButtonType
=
"ToggleButton"
ToggleType
=
"Radio"
GroupName
=
"EmployeePaidByWireGroup"
>
<
ToggleStates
>
<
telerik:RadButtonToggleState
Text
=
"No"
Value
=
"1"
Selected
=
"true"
/>
<
telerik:RadButtonToggleState
Text
=
"No"
Value
=
"0"
/>
</
ToggleStates
>
</
telerik:RadButton
>
</
div
>
<
telerik:RadAsyncUpload
ID
=
"rAsyncUploadPicture"
OnClientFileSelected
=
"OnEmployeePictureSelected"
AllowedMimeTypes
=
"image/jpg, image/png, image/gif, image/jpeg, image/pjpeg, image/svg+xml"
MultipleFileSelection
=
"Automatic"
AllowedFileExtensions
=
".jpeg,.jpg,.png,"
>
</
telerik:RadAsyncUpload
>
</
div
>
<
div
>
<
fieldset
>
<
legend
>Bank Information</
legend
>
<
div
><
label
>Bank Name</
label
><
telerik:RadTextBox
ID
=
"btnEmployeeBankName"
runat
=
"server"
AutoPostBack
=
"false"
></
telerik:RadTextBox
></
div
>
<
div
><
label
>Address</
label
>
<
telerik:RadTextBox
ID
=
"rBtnEmployeeBankAddress1"
runat
=
"server"
AutoPostBack
=
"false"
></
telerik:RadTextBox
>
<
telerik:RadTextBox
ID
=
"rBtnEmployeeBankAddress2"
runat
=
"server"
AutoPostBack
=
"false"
></
telerik:RadTextBox
>
</
div
>
<
div
><
label
>City</
label
><
telerik:RadTextBox
ID
=
"btnEmployeeBankCity"
runat
=
"server"
AutoPostBack
=
"false"
></
telerik:RadTextBox
></
div
>
<
div
><
label
>State</
label
><
telerik:RadTextBox
ID
=
"btnEmployeeBankState"
runat
=
"server"
AutoPostBack
=
"false"
></
telerik:RadTextBox
></
div
>
<
div
><
label
>Zip Code</
label
><
telerik:RadTextBox
ID
=
"btnEmployeeBankZipCode"
runat
=
"server"
AutoPostBack
=
"false"
></
telerik:RadTextBox
></
div
>
<
div
><
label
>Country</
label
><
telerik:RadTextBox
ID
=
"btnEmployeeBankCountry"
runat
=
"server"
AutoPostBack
=
"false"
></
telerik:RadTextBox
></
div
>
<
div
><
label
>Swift Code</
label
><
telerik:RadTextBox
ID
=
"btnEmployeeBankSwiftCode"
runat
=
"server"
AutoPostBack
=
"false"
></
telerik:RadTextBox
></
div
>
<
div
><
label
>Account Number</
label
><
telerik:RadTextBox
ID
=
"btnEmployeeBankAccountNumber"
runat
=
"server"
AutoPostBack
=
"false"
></
telerik:RadTextBox
></
div
>
<
div
><
label
>Account Owner</
label
><
telerik:RadTextBox
ID
=
"btnEmployeeBankAccountOwner"
runat
=
"server"
AutoPostBack
=
"false"
></
telerik:RadTextBox
></
div
>
<
div
><
label
>Intermediary Bank Name</
label
><
telerik:RadTextBox
ID
=
"btnEmployeeBankIntermediaryBankName"
runat
=
"server"
AutoPostBack
=
"false"
></
telerik:RadTextBox
></
div
>
<
div
><
label
>Intermediary Swift Code</
label
><
telerik:RadTextBox
ID
=
"btnEmployeeBankIntermediarySwiftCode"
runat
=
"server"
AutoPostBack
=
"false"
></
telerik:RadTextBox
></
div
>
</
fieldset
>
</
div
>
</
div
>
</
ContentTemplate
>
</
telerik:RadWindow
>
<
telerik:RadWindow
ID
=
"rWinControlPanel"
runat
=
"server"
Modal
=
"false"
Width
=
"80%"
>
<
ContentTemplate
>
<
div
>
<
telerik:RadButton
ID
=
"btnUserWindow"
runat
=
"server"
OnClientClicked
=
"openUsersWindow"
AutoPostBack
=
"false"
Text
=
"Users"
></
telerik:RadButton
>
<
telerik:RadButton
ID
=
"btnEmployeesWindow"
runat
=
"server"
OnClientClicked
=
"openEmployeesWindow"
AutoPostBack
=
"false"
Text
=
"Employees"
></
telerik:RadButton
>
</
div
>
</
ContentTemplate
>
</
telerik:RadWindow
>
</
div
>
<
telerik:RadCodeBlock
id
=
"RadBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
function openUsersWindow(sender, e) {
closeWindows(sender, e);
var window = $find("<%= rWinUsers.ClientID %>");
window.show();
window.maximize();
}
function openEmployeesWindow(sender, e) {
closeWindows(sender, e);
var window = $find("<%= rWinEmployees.ClientID %>");
window.show();
window.maximize();
}
function openControlPanelWindow(sender, e) {
closeWindows(sender, e);
var window = $find("<%= rWinControlPanel.ClientID %>");
window.show();
}
function closeWindows(sender, e) {
$find("<%= rWinUsers.ClientID %>").close();
$find("<%= rWinEmployees.ClientID %>").close();
}
function pageLoad(sender, e) {
Telerik.Web.UI.Calendar.Popup.zIndex = 10000000;
}
var cover;
var sync = { "lock": true, "result": false };
function ToggleCover(e) {
cover = (cover) ? cover : document.querySelectorAll("div#pagecover")[0];
cover.style.display = (cover.style.display != "block") ? "block" : "none";
}
</
script
>
</
telerik:RadCodeBlock
>
</
form
>
</
main
>
<
footer
>
</
footer
>
<
div
id
=
"pagecover"
></
div
>
</
body
>
</
html
>
The quickest way to observe the issue:
Load the page,
Click on 'Welcome' button (this invokes RadWindow => rWinControlPanel using OnClientClicking)
Click on either Button within the ControlPanelWindow (the new RadWindow will open in maximum).
Click on the minimize icon.
Click on the restore icon (to the right of the minimize icon) (note: it does not return to window.maximum)
Click the close button
Click on either Button within the ControlPanelWindow again.