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

Bug: RadWindow - pageLoad - Telerik.Web.UI.Calendar.Popup.zIndex - TelerikModalOverlay

3 Answers 90 Views

Ajax

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

Brett asked on 19 Dec 2014, 05:56 PM

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.

<%@ 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>

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

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

</ContentTemplate>

</telerik:RadWindow>

<telerik:RadWindow ID="rWinEmployees" runat="server" Modal="true" Width="80%">

<ContentTemplate>

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

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

3 Answers, 1 is accepted

answered on 24 Dec 2014, 09:57 AM

Hello Brett,

Thank you for contacting Telerik support.

Actually, the issue is not relevant neither to RadAjax controls, nor the RadDatePicker one. Indeed, the z-index of the modality appears incorrect, but this is due to the maximized RadWindow control. When the window is maximized, its z-index jumps to 100000, subsequently, closing the window, the next one shown is recalculated with a higher z-index and accordingly, the z-index of the modality, too. A second showing of the window again triggers the maximize() of the window and again the same z-index (100000), but this time is less than the one of the modality (i.e., at this point the window has a z-index equal to 100 000, but the modal layer - z-index: 100 003).

You can examine the same behavior with this simple configuration:

<telerik:RadButton ID="btnControlPanelPopupInvoker" runat="server"

OnClientClicking="openControlPanelWindow" AutoPostBack="false" Text="Welcome"></telerik:RadButton>

<telerik:RadWindow ID="rWinUsers" runat="server" Modal="true">

<ContentTemplate>

<h3>Some content</h3>

</ContentTemplate>

</telerik:RadWindow>

<telerik:RadWindow ID="rWinControlPanel" runat="server" Modal="false">

<ContentTemplate>

<div>

<telerik:RadButton ID="btnUserWindow" runat="server" OnClientClicked="openUsersWindow" AutoPostBack="false" Text="Users"></telerik:RadButton>

</div>

</ContentTemplate>

</telerik:RadWindow>

<script type="text/javascript">

function openUsersWindow(sender, e) {

var oWin = $find("<%= rWinUsers.ClientID %>");

oWin.show();

oWin.maximize();

alert(oWin.get_zindex());

}

function openControlPanelWindow(sender, e) {

var oWin = $find("<%= rWinControlPanel.ClientID %>");

oWin.show();

}

</script>

To resolve the issue you need just to instruct the RadWindow to not get the 100 000 z-index on maximizing, and this is done by setting the ShowOnTopWhenMaximized property to false.

<telerik:RadWindow ID="rWinUsers" runat="server" Modal="true" ShowOnTopWhenMaximized="false">

<ContentTemplate>

<h3>Some content</h3>

</ContentTemplate>

</telerik:RadWindow>

You can find relevant information about the z-index matter and the RadWindow in these materials:

On a side note, in the code provided there are some matters that drawn my attention that might be good to point them out:

I saw using ASP.NET AJAX controls outside the main form element. Note that our control should always be placed inside the form, so that they could be properly persisted trough post-backs. Also, they should be always after the ScriptManager control, so that they scripts to be properly served.

Note that disregarding these matter might result to incorrect side effects.
Using the window variable in JavaScript logic might lead to issues with teh logic. Note that the window variable is reserved and it is used when referring to the main window object of the browser. Therefore, I would advise you use another more suitable variable name.

Let me know if you need further assistance on the matter.

Regards,

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

answered on 26 Dec 2014, 05:09 AM

Thanks for the reply, Ianko. I think you're correct in that Telerik.Web.UI.Calendar.Popup.zIndex isn't part of the issue. Infact, I didn't even catch that the value being presented on the Overlay was 100,000, and not the 10,000,000 being assigned.. I think I drew that conclusion because I was testing the calendar popup, and it coincideded with experiencing the issue.

In your sample, with the ShowOnTopWhenMaximized set to false, I can see that the zindex value of the window is rising (regardless to the popup zIndex assignment).. so this is the expected behavior?

as far as the side notes go;

window as a local scoped variable name isn't likely to be a functional concern, but it is likely to cause confusion - particularly in debugging.. I'm not actually using a local scoped variable there; it was just a replacement for this sample...

also, client data persistence, especially through postbacks, is not a particular concern of mine..