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

Set z-index of radalert being launched from a RadWindow

9 Answers 471 Views
Window
This is a migrated thread and some comments may be shown as answers.
Sean
Top achievements
Rank 2
Sean asked on 01 Sep 2011, 12:36 AM
Hi Telerik,

May I have an example on how to directly access a RadAlert object and set its z-index before it appears on the page.

I have a RadWindow which is popped open and is modal. 

I then open an alert like so:

if (inputs[0].value.length == 0) {
    oWindow.BrowserWindow.radalert('Please select a dashboard to upload.', 200, 100, 'Error Uploading');
    return;
}

This causes the radalert to open with the same z-index as the oWindow. I would like to directly modify the radalert to have a z-index which is greater than the oWindow -- this is to mimic the functionality of alert, which appears above oWindow by default.

Thanks.

Sean

9 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 01 Sep 2011, 10:42 AM
Hello Sean,

 Here is how to set a new z-index dynamically with javascript:

if (inputs[0].value.length == 0) {
  
   var oAlert = oWindow.BrowserWindow.radalert('Please select a dashboard to upload.', 200, 100, 'Error Uploading');
   oAlert.get_popupElement().style.zIndex = 100000;
  
    return;
  
}
All the best,
Svetlina
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

0
Sean
Top achievements
Rank 2
answered on 01 Sep 2011, 06:40 PM
Hello Svetlina,

Thank you for your quick response. Setting the z-index did not have the result I had hoped for, could you please advise?

function CloseAndSave() {
    var radUpload = $find(radUpload1ID);
    var inputs = radUpload.getFileInputs();
    var oWindow = GetRadWindow();
 
    if (inputs[0].value.length == 0) {
        //alert('Please select a dashboard to upload.');
        var oAlert = oWindow.BrowserWindow.radalert('Please select a dashboard to upload.', 200, 100, 'Error Uploading');
        oAlert.get_popupElement.style.zIndex = 999999;
        return;
    }
 
    if( !radUpload.isExtensionValid(inputs[0].value) ) {
        alert('Please select an XML file.');
        radUpload.clearFileInputAt(0);
        return;
    }
 
    oWindow.argument = "Refresh";
    oWindow.close();
}
 
function GetRadWindow() {
    var oWindow = null;
    if (window.radWindow) oWindow = window.radWindow;
    else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
    return oWindow;
}

The radalert popup element appears beneath a modal radwindow. 

.RadWindow
{
    z-index: 90001 !important;
}

I do have this CSS which may be affecting things -- does it apply to both types of RadWindow and then override the client-side property I set?

0
Marin Bratanov
Telerik team
answered on 03 Sep 2011, 12:44 PM
Hi Sean,

Please try adding a small timeout when you call the RadAlert:
setTimeout(function ()
{
    var oAlert = oWindow.BrowserWindow.radalert('Please select a dashboard to upload.', 200, 100, 'Error Uploading');
}, 0);

This allows the browser to properly set the active RadWindow (the RadAlert is actually a RadWindow). If the timeout is not used when opening a RadWindow from another RadWindow in some scenarios the browser does not properly set the active window and I believe this is one of them.

All the best,
Marin
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

0
Sean
Top achievements
Rank 2
answered on 06 Sep 2011, 10:32 PM
Hi Marin,

I copied the code you provided and noticed a slight change. It looks like the alert now has the proper z-index, but because the other iframe was modal, it still appears 'behind' it.

As it is, I'm probably going to be changing the structure of my RadWindows in the upcoming weeks such that they don't pop-up iframes. This will resolve the issue, so, while interesting, it's not worth pursuing in great detail.

If Telerik believes it is possible to open a RadAlert above a modal radwindow holding an iframe, I would love to see a demo application showing this behavior is supported, though :)

Cheers,

Sean
0
Sean
Top achievements
Rank 2
answered on 08 Sep 2011, 12:29 AM
Hi Marin,

So, this issue still exists when I use a ContentTemplate RadWindow instead of an iframe! This was really shocking to me, I thought for sure it was because of this...

function CloseAndSave() {
    var radUpload = $find(radUpload1ID);
    var inputs = radUpload.getFileInputs();
 
    if (inputs[0].value.length == 0) {
        setTimeout(function () {
            var oAlert = radalert('Please select a dashboard to upload.', 200, 100, 'Error Uploading');
            oAlert.get_popupElement().style.zIndex = 9999999;
        }, 100);
 
        return;
    }
 
    if( !radUpload.isExtensionValid(inputs[0].value) ) {
        radalert('Please select an XML file.');
        radUpload.clearFileInputAt(0);
        return;
    }
 
    oWindow = null;
    $find(radAjaxManagerID).ajaxRequestWithTarget(radButton1ID);
}

<telerik:RadWindowManager ID="RadWindowManager1" Runat="Server" Skin="Web20" Modal="True" KeepInScreenBounds="True" EnableShadow="True" Behaviors="Close, Move" VisibleStatusbar="False" ReloadOnShow="True" ShowContentDuringLoad="False" Behavior="Close, Move" Title="Confirm Action" IconUrl="~/Content/Dashboard/Icons/radwindow_confirmdelete.png">
    <Windows>
        <telerik:RadWindow ID="UploadDashboardWindow" Runat="Server" IconUrl="~/Content/Dashboard/Icons/drive-upload.png" OnClientAutoSizeEnd="OnClientAutoSizeEnd" Title="Upload Dashboard" Width="290" Height="130">
            <ContentTemplate>
 
                <fieldset id="UploadDashboard">
                    <legend>Upload Dashboard</legend>
                    <telerik:RadUpload ID="RadUpload1" Runat="server" AllowedFileExtensions=".xml" Skin="Web20" MaxFileInputsCount="1" ControlObjectsVisibility="None" Height="40px" Width="150px" >
                    </telerik:RadUpload>
 
                    <div class="BottomButton">
                        <telerik:RadButton ID="RadButton1" Runat="Server" AutoPostBack="False" Skin="Web20" Text="Upload" OnClick="RadButton1_Click" OnClientClicked="CloseAndSave" />
                    </div>
                </fieldset>
            </ContentTemplate>
        </telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>

Does this all look correct to you?

Cheers,

Sean
0
Marin Bratanov
Telerik team
answered on 08 Sep 2011, 04:10 PM
Hi Sean,

I tested this code both in the ContentTemplate and in an external page and it seems to be working as expected on my end: http://screencast.com/t/gBH3bavYyG6.

I have also attached my test pages as a reference. Please note that I do not have the .RadWindow class where z-index is set, as this is a very global selector and will affect all RadWindows on the page, including the RadAlert (and RadPrompt, and RadConfirm, for that matter). if you have this selector then the RadAlert has the same z-index as the old and this should not happen if you want it to appear correctly. The correct way to set a z-index for a RadWindow is shown in this help article.

I have also removed the line where a different z-index is set for the alert, as it is not necessary with the default settings, only if you modify the z-index of the parent windows manually.


Greetings,
Marin
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

0
Sean
Top achievements
Rank 2
answered on 08 Sep 2011, 05:37 PM
Hi Marin,

Thank you for your clarifications. Indeed, I do have a global selector set for RadWindows:

.RadWindow
{
    z-index: 90001 !important;
}

This is intended to place the RadWindows above loading panels -- I didn't want a main-page loading panel appearing above a popped-up RadWindow.

I tried a couple of alternatives after your suggestion, but wasn't successful in maintaining my old functionality.

I tried:

#HistoricalLocalSettingsWindow,
#DashboardGlobalSettingsWindow,
#CustomLocalSettingsWindow,
#ReportWindow,
#UploadDashboardWindow
{
    z-index: 90001 !important;
}

as well as

<telerik:RadWindowManager ID="RadWindowManager1" Runat="Server" Skin="Web20" Modal="True" KeepInScreenBounds="True" EnableShadow="True" Behaviors="Close, Move" VisibleStatusbar="False" ReloadOnShow="True" ShowContentDuringLoad="False" Behavior="Close, Move" Title="Confirm Action" IconUrl="~/Content/Dashboard/Icons/radwindow_confirmdelete.png">
    <Windows>
        <telerik:RadWindow ID="HistoricalLocalSettingsWindow" Runat="Server" NavigateUrl="~/Dashboard/Dialog/Windows/HistoricalLocalSettings.aspx" OnClientShow="OnLocalSettingsShow" OnClientClose="OnHistoricalLocalSettingsClose" OnClientAutoSizeEnd="OnClientAutoSizeEnd" IconUrl="~/Content/Dashboard/Icons/radwindow_settings.png" Title="Settings" Width="450px" AutoSize="True" AutoSizeBehaviors="Height" Style="z-index: 90001 !important" />
        <telerik:RadWindow ID="DashboardGlobalSettingsWindow" Runat="Server" NavigateUrl="~/Dashboard/Dialog/Windows/DashboardGlobalSettings.aspx" OnClientShow="OnDashboardGlobalSettingsShow" OnClientClose="OnDashboardGlobalSettingsClose" IconUrl="~/Content/Dashboard/Icons/radwindow_settings.png" OnClientAutoSizeEnd="OnClientAutoSizeEnd" Title="Global Settings" MinHeight="337px" Height="337px" Width="450px" Style="z-index: 90001 !important" />
        <telerik:RadWindow ID="CustomLocalSettingsWindow" Runat="Server" NavigateUrl="~/Dashboard/Dialog/Windows/CustomLocalSettings.aspx" OnClientShow="OnLocalSettingsShow" OnClientClose="OnCustomLocalSettingsClose" IconUrl="~/Content/Dashboard/Icons/radwindow_settings.png" OnClientAutoSizeEnd="OnClientAutoSizeEnd" Title="Settings" Width="450px" Height="215px" Style="z-index: 90001 !important"/>
        <telerik:RadWindow ID="ReportWindow" Runat="Server" Title="CableSolve Report Viewer" Width="600" Height="500" OnClientClose="OnReportWindowClose" Style="z-index: 90001 !important" />
     
        <telerik:RadWindow ID="UploadDashboardWindow" Runat="Server" IconUrl="~/Content/Dashboard/Icons/drive-upload.png" OnClientAutoSizeEnd="OnClientAutoSizeEnd" Title="Upload Dashboard" Width="290" Height="130" Style="z-index: 90001 !important">
            <ContentTemplate>
 
                <fieldset id="UploadDashboard">
                    <legend>Upload Dashboard</legend>
                    <telerik:RadUpload ID="RadUpload1" Runat="server" AllowedFileExtensions=".xml" Skin="Web20" MaxFileInputsCount="1" ControlObjectsVisibility="None" Height="40px" Width="150px" >
                    </telerik:RadUpload>
 
                    <div class="BottomButton">
                        <telerik:RadButton ID="RadButton1" Runat="Server" AutoPostBack="False" Skin="Web20" Text="Upload" OnClick="RadButton1_Click" OnClientClicked="CloseAndSave" />
                    </div>
                </fieldset>
            </ContentTemplate>
        </telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>

with and without the important tags when setting the style inside of the mark-up. Neither of these implementations kept the RadWindow above the loading panel. Am I missing something?

Sean
0
Accepted
Marin Bratanov
Telerik team
answered on 13 Sep 2011, 03:36 PM
Hello Sean,

If you wish to have your RadWindows above the loading panel you can set the Style property for the RadWindowManager so that it is able to manage the z-index values for the child windows correctly:
<telerik:RadWindowManager ID="RadWindowManager1" runat="Server" Skin="Web20" Modal="True"
    KeepInScreenBounds="True" EnableShadow="True" Behaviors="Close, Move" VisibleStatusbar="False"
    ReloadOnShow="True" ShowContentDuringLoad="False" Behavior="Close, Move" Title="Confirm Action"
    IconUrl="~/Content/Dashboard/Icons/radwindow_confirmdelete.png" Style="z-index: 90001 !important">
    <Windows>
        <telerik:RadWindow ID="UploadDashboardWindow" runat="Server" IconUrl="~/Content/Dashboard/Icons/drive-upload.png"
            OnClientAutoSizeEnd="OnClientAutoSizeEnd" Title="Upload Dashboard" Width="290"
            Height="130">
            <ContentTemplate>
                <fieldset id="UploadDashboard">
                    <legend>Upload Dashboard</legend>
                    <telerik:RadUpload ID="RadUpload1" runat="server" AllowedFileExtensions=".xml" Skin="Web20"
                        MaxFileInputsCount="1" ControlObjectsVisibility="None" Height="40px" Width="150px">
                    </telerik:RadUpload>
                    <div class="BottomButton">
                        <telerik:RadButton ID="RadButton1" runat="Server" AutoPostBack="False" Skin="Web20"
                            Text="Upload" OnClick="RadButton1_Click" OnClientClicked="CloseAndSave" />
                    </div>
                </fieldset>
            </ContentTemplate>
        </telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>


You can see this behavior in action in the attached page, based on your code and in the following screen capture: http://screencast.com/t/iKCezgI6.


Kind regards,
Marin
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Sean
Top achievements
Rank 2
answered on 13 Sep 2011, 06:11 PM
Hi Marin,

This is working as expected. Thank you.

Cheers,

Sean
Tags
Window
Asked by
Sean
Top achievements
Rank 2
Answers by
Svetlina Anati
Telerik team
Sean
Top achievements
Rank 2
Marin Bratanov
Telerik team
Share this question
or