Skip to content

Update predefined-dialog-beneath-modal-dialog-blazor.md #3333

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 11, 2025
+30 −37
Merged

Update predefined-dialog-beneath-modal-dialog-blazor.md #3333

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
37b3bed
Update predefined-dialog-beneath-modal-dialog-blazor.md
Tsvetomir-Hr Nov 6, 2025
6f353c2
polish
dimodi Nov 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 30 additions & 37 deletions knowledge-base/predefined-dialog-beneath-modal-dialog-blazor.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,12 @@ ticketid: 1686792
## Environment

<table>
<tbody>
<tr>
<td>Product</td>
<td>
Dialog for Blazor
</td>
</tr>
<tr>
<td>Version</td>
<td>Current</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Product</td>
<td>Dialog for Blazor</td>
</tr>
</tbody>
</table>

## Description
Expand All @@ -43,27 +37,29 @@ You can hide the close button of the main modal dialog via the `ShowCloseButton`

Or, you can apply a workaround to adjust the `z-index` of the predefined dialog.

### Using the `ShowCloseButton` Parameter
### Set `ShowCloseButton` to `false`

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.

```razor
````razor
<TelerikDialog ShowCloseButton="false" @bind-Visible="@Visible">
<!-- Modal Dialog Content -->
<DialogContent>
Dialog Content
</DialogContent>
<DialogButtons>
<TelerikButton OnClick="@OnShowConfirm">ShowDialog</TelerikButton>
</DialogButtons>
</TelerikDialog>

@code {
[CascadingParameter]
private DialogFactory Dialogs { get; set; }
private DialogFactory? Dialogs { get; set; }

private bool Visible { get; set; }
private bool Visible { get; set; } = true;

private async Task OnShowConfirm()
{
bool isConfirmed = await Dialogs.ConfirmAsync("Are you sure?");
bool isConfirmed = await Dialogs!.ConfirmAsync("Are you sure?");

if (isConfirmed)
{
Expand All @@ -76,26 +72,28 @@ Set the `ShowCloseButton` parameter of the main modal dialog to `false`, and mov
}
}
}
```
````

### Workaround: Adjust the `z-index` Dynamically
### Adjust the `z-index` Dynamically

Use JavaScript to dynamically adjust the `z-index` of the predefined dialog. This ensures it appears above the modal dialog.
Use JavaScript to dynamically adjust the `z-index` of the predefined dialog. This ensures it appears above the modal dialog. The approach targets the dialog wrapper using CSS selectors and modifies its `z-index` style.

#### JavaScript Code
> This workaround relies on CSS selectors which may change in future updates of the Telerik theme. Use this approach with caution.

```javascript
<script suppress-error="BL9992">
function bringDialogToTop() {
var dialogWrapper = document.querySelector(".k-window.k-dialog.k-alert.telerik-blazor").closest(".k-dialog-wrapper");
>caption JavaScript

````javascript.skip-repl
function bringDialogToTop() {
var dialogWrapper = document.querySelector(".k-window.k-dialog.k-alert").closest(".k-dialog-wrapper");
if (dialogWrapper) {
dialogWrapper.style.zIndex = parseInt(dialogWrapper.style.zIndex) + 2;
}
dialogWrapper.style.zIndex = parseInt(dialogWrapper.style.zIndex) + 2;
}
</script>
```
}
````

>caption Razor

```razor
````razor
@inject IJSRuntime js

<TelerikDialog Visible="@Visible" VisibleChanged="OnDialogClosingAsync">
Expand Down Expand Up @@ -145,12 +143,7 @@ Use JavaScript to dynamically adjust the `z-index` of the predefined dialog. Thi
await base.OnAfterRenderAsync(firstRender);
}
}

This approach targets the dialog wrapper using CSS selectors and modifies its `z-index`.

#### Note

This workaround relies on CSS selectors which may change in future updates of the Telerik theme. Use this approach with caution.
````

## See Also

Expand Down
Loading