Window opened from another window appears behind

5 posts, 0 answers
  1. Mickael
    Mickael avatar
    57 posts
    Member since:
    Oct 2014

    Posted 21 Oct 2014 Link to this post

    Hi,

    I have a window A with a button in it.
    That window is open from my Main page as a modal.
    When I click on the button in A, it opens another modal window B using
    B is declared in Main.

    The problem is that B appears behind A.
    So I have to move A aside to be able to click on B for get it to come in front.

    Is there a way to force the Z index of B to be in front of A.

    Also it looks like the modality is not applied.
    I mean I see the gray modal background.
    But I can click on A or B without any problem when they should both be modal (meaning I should not be able to click on the other one)

    Maybe I am doing something wrong.

    In Main:

    <telerik:RadWindow
        ID="RdWndw_AddEdit"
        runat="server"
        AutoSizeBehaviors="Width, Height"
        CssClass="Styles/Window.css"
        AutoSize="true"
        VisibleStatusbar="false"
        Behaviors="Move"
        VisibleOnPageLoad="false"
        ReloadOnShow="true"
        Modal="true"
        NavigateUrl="Popup_Add.aspx"
        OnClientClose="OnAddEditClose"
        EnableShadow="true">
    </telerik:RadWindow>
     
    <telerik:RadWindow
        ID="RdWndw_AddNewExtra"
        runat="server"
        AutoSizeBehaviors="Width, Height"
        AutoSize="true"
        VisibleStatusbar="false"
        Behaviors="Move"
        VisibleOnPageLoad="false"
        ReloadOnShow="true"
        Modal="true"
        NavigateUrl="Popup_AddNewExtra.aspx"
        OnClientClose="OnAddNewExtraClose"
        EnableShadow="true">
    </telerik:RadWindow>

    function OpenAddEdit() {
        var wnd = $find("<%=RdWndw_AddEdit.ClientID %>");
        wnd.show();
    }
      
    function OpenAddExtraField() {
        var wnd = $find("<%=RdWndw_AddNewExtra.ClientID %>");
        wnd.show();
    }

    In Popup A:

    <telerik:RadButton
        ID="RadButton3"
        runat="server"
        Text="Add new field"
        OnClientClicked="CallOpenAddExtraFieldOnParent"
        CommandName="newField">
    </telerik:RadButton>

    function CallOpenAddExtraFieldOnParent(sender, args) {
        PageMethods.SetAddNewTypeFlag(sender.get_commandName());
        GetRadWindow().BrowserWindow.OpenAddExtraField();
    }




  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3599 posts

    Posted 21 Oct 2014 Link to this post

    Hi Michael,

    You should use a small timeout when opening the second dialog, as shown here: http://www.telerik.com/help/aspnet-ajax/window-programming-opening-from-within-dialog.html.

    On a side note - the CssClass property of the RadWindow is just a CSS class applied to the popup element and not the path to some stylesheet.

    Also, the button that opens the second dialog seems to have both client-side and server side handlers attached so you may want to use only one.


    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mickael
    Mickael avatar
    57 posts
    Member since:
    Oct 2014

    Posted 21 Oct 2014 in reply to Marin Bratanov Link to this post

    Hi Marin,

    Thanks for your quick answer.
    I will take a look at your link asap.

    For the CssClass, I used the Telerik Visual Style Builder.
    And it gave me a zip file with a lot of css files inside.
    But I could not find how to use them. I thought I had to point to each with the CssClass.
    How should I do then?
    Or is there a tutorial somewhere on how to use them?

    Also I am not sure what you mean should the button for the second dialog having both client-side and server-side handlers attached.
    I only declared OnClientClicked as a javascript function.
    And use CommandName as a parameter holder for the OnClientClicked. Does CommandName actually fire an event ?
  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3599 posts

    Posted 21 Oct 2014 Link to this post

    Hi Mickael,

    Here is the basic tutorial on how to use custom skins: http://www.telerik.com/help/aspnet-ajax/introduction-create-custom-skin.html.

    The following article also explains how to create and use a custom skin (you can skip the part that shows how to create the css files): http://www.telerik.com/help/aspnet-ajax/window-appearance-css-classes-usage.html.

    Basically, you need to add those stylesheets to the page, set the Skin property of the control to the name of your custom skin and set its EnableEmbeddedSkins property to false.

    On the button - I am sorry, that was my mistake in reading the code. You may still want to set the AutoPostBack property to false to avoid the postback and only execute the client-side code.


    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.

     
  6. Mickael
    Mickael avatar
    57 posts
    Member since:
    Oct 2014

    Posted 21 Oct 2014 in reply to Marin Bratanov Link to this post

    Thank Marin,

    I added the AutoPostBack = false and it looks like it did the trick.
    Now Window B appears in front and is a true modal.

    I also changed CommandName to CommandArgument just to be safe.

    I will read your like for the skins asap. :)
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017