Blazor TelerikDialog: second dialog does not show correctly after closing the first

0 Answers 5 Views
Dialog
Arjun
Top achievements
Rank 1
Arjun asked on 16 Sep 2025, 08:47 AM | edited on 16 Sep 2025, 08:59 AM

I am working with two Telerik Dialogs in a Blazor page.
One dialog is shown when an AP Strategy validation is required, and the other dialog is a confirmation popup.

Here is the markup:

<TelerikDialog Class="manual-adjustment_dialogBox" @bind-Visible="@IsDialogBoxVisible" Width="600px" Title="Message from webpage" ShowCloseButton="false"> <DialogContent> <p style="text-align: center;">@ConfirmMessage</p> </DialogContent> <DialogButtons> <TelerikButton Id="yes-btn" ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)" @onclick="() => OnConfirmClick()">Yes</TelerikButton> <TelerikButton Id="no-btn" ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)" @onclick="() => GoBackToPopUp()">No</TelerikButton> </DialogButtons> </TelerikDialog> <TelerikDialog Class="manual-adjustment_apStrategyDialogBox" @bind-Visible="@IsApStrategyValidationVisible" Width="600px" Title="Message from webpage" ShowCloseButton="true"> <DialogContent> <p style="text-align: center;">@ConfirmMessage</p> </DialogContent> <DialogButtons> <TelerikButton Id="confirm-btn" ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)" @onclick="() => FixApStrategyAndGoBackToPopUp()">OK</TelerikButton> <TelerikButton Id="cancel-btn" ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)" @onclick="() => GoBackToPopUp()">Cancel</TelerikButton> </DialogButtons> </TelerikDialog>

When the AP Strategy dialog is visible (IsApStrategyValidationVisible = true), the user clicks OK, which calls this method:

public void FixApStrategyAndGoBackToPopUp() { IsApStrategyValidationVisible = false; if (ManualAdjustmentArDTO.Amount == BundleUIResults.Bundle.Amount && (ManualAdjustmentArDTO.APStrategyAdjustment == BundleManager.Schemas.Core.Content.APStrategy.ProRata || ManualAdjustmentArDTO.APStrategyAdjustment == BundleManager.Schemas.Core.Content.APStrategy.AR) && ManualAdjustmentArDTO.APStrategyType == APStrategyType.AllCharges) { ManualAdjustmentArDTO.APStrategyAdjustment = BundleManager.Schemas.Core.Content.APStrategy.AP; ConfirmMessage = $"Adjustment ... Are you sure you want to proceed?"; } else if (ManualAdjustmentArDTO.Amount != BundleUIResults.Bundle.Amount && ManualAdjustmentArDTO.APStrategyAdjustment == BundleManager.Schemas.Core.Content.APStrategy.AP && ManualAdjustmentArDTO.APStrategyType == APStrategyType.AllCharges) { ManualAdjustmentArDTO.APStrategyAdjustment = BundleManager.Schemas.Core.Content.APStrategy.ProRata; ConfirmMessage = $"Adjustment ... Are you sure you want to proceed?"; } IsDialogBoxVisible = true; }

Problem

  • When debugging step by step, it works fine: the AP Strategy dialog closes, and then the confirmation dialog opens.

  • But when running normally (without debugger), both IsApStrategyValidationVisible is false and IsDialogBoxVisible is true at the same time. This causes the confirmation dialog not to show properly.

It looks like Blazor/Telerik is not processing the closing of the first dialog before the second is opened.


Question

How can I reliably close one TelerikDialog and then open another in Blazor, without them conflicting?
Is there a recommended pattern (maybe using a single state/enum) for handling multiple dialogs?

No answers yet. Maybe you can help?

Tags
Dialog
Asked by
Arjun
Top achievements
Rank 1
Share this question
or