DialogService is render behind Datagrid

Radzen.Blazor Components
1

Hi,
i've declared a radzendatagrid with a column containing a radzenbutton on wich the click should pop up a radzen dialogservice page.
The code is working well but when the pop up page is rendered, it is rendered behind the Datagrid .
The datagrid is not grayed only the page behind .
Is there a way to specify the Zorder ?

Thank a lot

2

Hi @olivier,

This shouldn't happen normally as displaying dialogs on top of other components is the main feature of the DialogService. Where did you put the <RadzenDialog /> element in your layout? Perhaps it is in a place with a lower z-order. Try moving it on top.

3

Hi , here is how it's called :

                <RadzenDataGridColumn TItem="Suivi_Transporteur" Width="120px">
                    <Template Context="LeSuivi">

                        <RadzenButton Text="Visualiser le Mail" ButtonStyle="ButtonStyle.Secondary" Click="@(args => Visu_Mail(LeSuivi.Contenumail))" />
                    </Template>
                </RadzenDataGridColumn>

And CodeBehind :

  public async Task Visu_Mail(string Contenu_Mail)
    {
        //string a = Contenu_Mail;
        await DialogService.OpenAsync<Visu_Email_Page>("Visualisation Email",null,
        new DialogOptions() { Width = "700px", Height = "570px", Resizable = true, Draggable = false,  });
    }

Thanks

4

Hi @olivier,

Your code looks correct and here is how a dialog normally appears above a DataGrid.

image
image2772×1510 192 KB

Check my first reply about the position of the <RadzenDialog /> element in your layout.

5

It is declared here :

image
image950×575 50.4 KB

6

Move it outside of the <div class="page"> and it should display properly. Also move all other Radzen components as it may affect their positioning as well.

1 Like
7

And yes the position is in div .
If i put it on top of it , it works !
Did not see that, bad copy/paste !
:upside_down_face: :wink:

8

I was having the same exact problem and this solved it. You might consider changing the Getting Started page to mention something about where to include the dialog and others on step #6.
Thanks,
Wayne