Window opened from another window appears behind

[Mickael]

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();
}

[Marin Bratanov]

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

 

 

[Mickael]

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 ?

[Marin Bratanov]

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

 

 

[Mickael]

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. :)