Z-index Dialog

[Pavel]

Hello,

I have a dialog1 that open dialog2 on submit.

I would like the z-index of dialog1 to be higher than dialog 2 even when the second dialog is triggered. So dialog 1 should always be on top even if other dialogs are opened after.

I have tried setting the z-index on dialog1  to ZIndex="10000000" but that didnt work and dialog1 gets covered up by dialog2 when its opened. I also tried setting the z-index in the css class of the dialog but also didn't work.

I have attached a sample

Attachment: DialogSample_5128dc87.zip

[Vinothkumar Yuvaraj]

Hi Pavel,

We achieved your requirement by using the ZIndex property. Please see the following code and attached sample for your reference.

Index.razor

<SfDialog ZIndex="10001"> </SfDialog>

SecondModal.razor

<SfDialog ZIndex="10000"> </SfDialog>

API Link : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_ZIndex

Please let us know if you have any concerns and also see the attached video.

Regards,

Vinothkumar

Attachment: Dialog_749f5506_a67f9f9c.zip

[Pavel]

Hello,

I have one dialog1 at the root level that I always want to stay on top. If I have 60 other dialogs, do I have to go in and put a lower zindex value than dialog1 on all of the 60 other dialogs?

Is there a way to only set the zindex value on dialog1 and have it stay on top all of other dialogs?
for example is there a value i could set on dialog1 that will by default higher than other modals with no zindex set.

[Vinothkumar Yuvaraj]

Hi Pavel,

To clarify, by default, our Dialog component is positioned with a higher z-index than all elements on the web page. This is because the active element gets focused when the Dialog component is opened and has the higher z-index value. However, if you have a scenario where you wish to change the z-index of the Dialog components, such as ensuring that the first dialog is always on top, you can set a lower z-index on the second dialog as per our previous update.

You no need to specify z-index for all your dialog component. Only dialog within dialog requires a lower z-index than the root-level dialog. 

We would appreciate it if you could provide us with more information about your specific use case or scenario and why you would like the first dialog to always be on top. This will help us better understand your needs and provide you with a more tailored solution.

[Pavel]

I have an error display dialog at the root level. Errors that happen are logged here. The error dialog is used on every webpage and should always be on top.

User clicks on dialog2. Before the second dialog is opened, an error occurs, is logged and added to the error manager dialog. The error manager dialog opens briefly but is then covered up by dialog2. Error manager should be on top until the user closes the dialog. Error manager dialog being covered up without acknowledgement from user should not happen.

Therefore since the error manager dialog is on every page and should always be on top, I must set a z-index value on the error manager, and set a lower z-index value on any other dialog in the application?

[Vinothkumar Yuvaraj]

Hi Pavel,

To achieve this, you will need to set a higher ZIndex value on your root level dialog and set a common lower ZIndex value on all the remaining 60 dialogs. You can use a common variable to set the same ZIndex value for the remaining dialogs.

We have included a sample for your reference below. In the sample, we have set a ZIndex value of 10001 for the index.razor page dialog (root level dialog) and a ZIndex value of 10000 for the second and third dialogs (remaining 60 dialogs). Please see the attached sample for your reference.

Attachment: DialogSample_5128dc87_74d5d851_2ac9948d.zip

[SZL]

Hello,

How this works in case of SfGrid Edit Dialog? This component has no ZIndex property. Also has no ZIndex property for SfToast component.

Currently my Toast appear below the Grid Edit dialog.

I use sweetalert2 and has the same problem, I already fixed it with javascript hack, but I think that is not a perfect solution. This is a 3rd prty component so I fix it myself.

For SfToast do you  have a good solution to appear above the grid's Edit dialog?

or

Can I set the SfGrid Edit Dialog z-index and SfToast z-index manually? If I good see the Edit Dialog z-index is calculated automatically by max z-index in page plus N.

Thank you very much!

[Mallesh Ravi Chandran]

Hi SZL , 

We would like to inform you that the issue "Need to provide the zIndex property option for GridEditSettings.DialogParams" has been addressed in our 29.1.41 release. To resolve the reported z-index conflict between the SfGrid Edit Dialog and the SfToast component, we kindly recommend upgrading to the latest version of the Syncfusion NuGet package. 

Once updated, you can set the ZIndex for the Edit Dialog as shown below:

 

Code Snippet :

<SfGrid @ref="DelegateDataGrid" DataSource="@DelegateRecords" AllowExcelExport="true" AllowSelection="true" AllowPaging="true" AllowSorting="true" RowHeight="60" AllowTextWrap="true" Toolbar="@ToolbarItems">

     <GridEvents TValue="DelegateUserModel" RowCreated="RowCreatedHandler" OnToolbarClick="ToolbarClickHandler"></GridEvents>

     <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog" Dialog="@dialogSettings">

             </SfGrid>

   public DialogSettings dialogSettings = new DialogSettings

       {

           ShowCloseIcon = true,

           ZIndex =1,

       };

    

By adjusting the ZIndex value, you can control the stacking order to ensure that the SfToast appears above the dialog as needed.

Please let us know if you need any further assistance.

Regards, 

Mallesh