Set z-index of radalert being launched from a RadWindow

10 posts, 1 answers
  1. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 31 Aug 2011 Link to this post

    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
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 01 Sep 2011 Link to this post

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

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 01 Sep 2011 Link to this post

    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?

  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 03 Sep 2011 Link to this post

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

  6. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 06 Sep 2011 Link to this post

    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
  7. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 07 Sep 2011 Link to this post

    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
  8. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 08 Sep 2011 Link to this post

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

  9. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 08 Sep 2011 Link to this post

    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
  10. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 13 Sep 2011 Link to this post

    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.
  11. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 13 Sep 2011 Link to this post

    Hi Marin,

    This is working as expected. Thank you.

    Cheers,

    Sean
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017