Skip to content

Commit 6286e3d

Browse files
KB Botradkostanev
KB Bot
authored and
radkostanev
committed
Added new kb article predefined-dialog-beneath-modal-dialog-blazor
1 parent 55b8b0d commit 6286e3d

File tree

1 file changed

+158
-0
lines changed

1 file changed

+158
-0
lines changed

‎knowledge-base/predefined-dialog-beneath-modal-dialog-blazor.md

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
---
2+
title: Resolving Predefined Dialog Rendering Beneath Modal Dialog in Blazor
3+
description: Learn how to address the issue of a predefined confirmation dialog appearing beneath a modal dialog in Blazor.
4+
type: how-to
5+
page_title: Fixing Predefined Dialog Display Order in Telerik Blazor Dialog
6+
slug: predefined-dialog-beneath-modal-dialog-blazor
7+
tags: dialog, blazor, zindex, predefined-dialog, modal-dialog, visiblechanged, workaround
8+
res_type: kb
9+
ticketid: 1686792
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>
19+
Dialog for Blazor
20+
</td>
21+
</tr>
22+
<tr>
23+
<td>Version</td>
24+
<td>Current</td>
25+
</tr>
26+
</tbody>
27+
</table>
28+
29+
## Description
30+
31+
When using the [Dialog](https://www.telerik.com/blazor-ui/documentation/components/dialog/overview) component in Blazor, you may encounter an issue where a predefined confirmation dialog appears beneath an already open modal dialog. This can occur when handling logic in the `VisibleChanged` event of the main dialog, such as displaying a confirmation prompt before closing the modal. The root cause is related to the `z-index` of the dialog components.
32+
33+
This knowledge base article also answers the following questions:
34+
- How can I ensure the predefined dialog appears above the modal dialog?
35+
- What workaround addresses z-index issues with predefined dialogs?
36+
- How to prevent predefined dialogs from rendering behind other components?
37+
38+
## Solution
39+
40+
To resolve the issue, you have two options:
41+
42+
You can hide the close button of the main modal dialog via the `ShowCloseButton` Parameter, then handle the visibility of each dialog manually in a method.
43+
44+
Or, you can apply a workaround to adjust the `z-index` of the predefined dialog.
45+
46+
### Using the `ShowCloseButton` Parameter
47+
48+
Set the `ShowCloseButton` parameter of the main modal dialog to `false`, and move the confirmation logic to a button within the modal dialog. This ensures the predefined dialog does not overlap with the modal.
49+
50+
```razor
51+
<TelerikDialog ShowCloseButton="false" @bind-Visible="@Visible">
52+
<!-- Modal Dialog Content -->
53+
<DialogButtons>
54+
<TelerikButton OnClick="@OnShowConfirm">ShowDialog</TelerikButton>
55+
</DialogButtons>
56+
</TelerikDialog>
57+
58+
@code {
59+
[CascadingParameter]
60+
private DialogFactory Dialogs { get; set; }
61+
62+
private bool Visible { get; set; }
63+
64+
private async Task OnShowConfirm()
65+
{
66+
bool isConfirmed = await Dialogs.ConfirmAsync("Are you sure?");
67+
68+
if (isConfirmed)
69+
{
70+
Console.WriteLine("The user is sure, continue.");
71+
Visible = false;
72+
}
73+
else
74+
{
75+
Console.WriteLine("The user changed their mind.");
76+
}
77+
}
78+
}
79+
```
80+
81+
### Workaround: Adjust the `z-index` Dynamically
82+
83+
Use JavaScript to dynamically adjust the `z-index` of the predefined dialog. This ensures it appears above the modal dialog.
84+
85+
#### JavaScript Code
86+
87+
```javascript
88+
<script suppress-error="BL9992">
89+
function bringDialogToTop() {
90+
var dialogWrapper = document.querySelector(".k-window.k-dialog.k-alert.telerik-blazor").closest(".k-dialog-wrapper");
91+
if (dialogWrapper) {
92+
dialogWrapper.style.zIndex = parseInt(dialogWrapper.style.zIndex) + 2;
93+
}
94+
}
95+
</script>
96+
```
97+
98+
```razor
99+
<TelerikDialog Visible="@Visible" VisibleChanged="OnDialogClosingAsync">
100+
</TelerikDialog>
101+
102+
@code{
103+
[CascadingParameter]
104+
private DialogFactory Dialogs { get; set; }
105+
106+
private bool Visible { get; set; } = true;
107+
private bool ShouldFocusDialog { get; set; }
108+
109+
private async Task OnDialogClosingAsync(bool currentVisibility)
110+
{
111+
ShouldFocusDialog = true;
112+
await ShowConfirm(currentVisibility);
113+
114+
}
115+
116+
private async Task ShowConfirm(bool currentVisibility)
117+
{
118+
bool isConfirmed = await Dialogs.ConfirmAsync("Are you sure?");
119+
120+
if (isConfirmed)
121+
{
122+
Console.WriteLine("The user is sure, continue.");
123+
Visible = currentVisibility;
124+
125+
}
126+
else
127+
{
128+
Console.WriteLine("The user changed their mind");
129+
130+
}
131+
}
132+
133+
protected override async Task OnAfterRenderAsync(bool firstRender)
134+
{
135+
if (ShouldFocusDialog)
136+
{
137+
ShouldFocusDialog = false;
138+
await Task.Delay(1);
139+
140+
await js.InvokeVoidAsync("bringDialogToTop");
141+
}
142+
143+
await base.OnAfterRenderAsync(firstRender);
144+
}
145+
}
146+
147+
This approach targets the dialog wrapper using CSS selectors and modifies its `z-index`.
148+
149+
#### Note
150+
151+
This workaround relies on CSS selectors which may change in future updates of the Telerik theme. Use this approach with caution.
152+
153+
## See Also
154+
155+
- [Dialog Overview](https://www.telerik.com/blazor-ui/documentation/components/dialog/overview)
156+
- [VisibleChanged Event](https://www.telerik.com/blazor-ui/documentation/components/dialog/events#visiblechanged)
157+
- [Feature Request: Dialog Behind Modal Window](https://feedback.telerik.com/blazor/1675962-telerik-dialog-shows-behind-modal-window-after-second-opening)
158+
- [Predefined Dialogs](https://www.telerik.com/blazor-ui/documentation/components/dialogfactory/overview)

0 commit comments

Comments
 (0)