Predefined Dialogs - Alert, Confirm, Prompt
Telerik UI for Blazor provides styled substitutes to the standard alert, confirm, and prompt dialogs of the browser. These Blazor popup messages match the theme of the components to make it obvious to the user that the modal dialog is coming from your application.
Using Predefined Dialogs
To use the alert, confirm, and prompt dialogs (popup messages), receive a cascading parameter of type Telerik.Blazor.DialogFactory. This object exposes the methods you can use to display the predefined dialogs.
[CascadingParameter]
public DialogFactory Dialogs { get; set; }There are three available ready-made dialogs:
TelerikRootComponent Dependency
The DialogFactory cascading parameter can only be consumed inside child Razor components of the TelerikRootComponent. This is easily achieved in standard Blazor apps where the TelerikRootComponent resides inside the layout file.
- To show predefined dialogs in
MainLayout.razor, add theTelerikRootComponentin a parent layout. - When using UI for Blazor in ASP.NET apps, an additional child component is needed.
If the TelerikRootComponent is not available, or if it's at the wrong place in the app, the DialogFactory will trigger a NullReferenceException.
Using await
The DialogFactory methods must be awaited. Do not use them with discard variables (_). If you don't need to await the user response, then use the <TelerikDialog> component declaratively.
Showing Multiple Predefined Dialogs
The DialogFactory supports only one open popup dialog at a time. Showing multiple predefined dialogs simultaneously can result in unexpected app behavior. If a long asynchronous operation can end with the display of a DialogFactory popup, the application should prevent the user from triggering additional predefined dialogs before the time consuming operation completes. Consider a LoaderContainer to block the whole user interface or a specific component.
Alert
The alert dialog is a Blazor popup message. It shows the user that something went wrong, such as a major error that requires their attention and blocks the UI, as opposed to a notification that is not modal and is small.
Use an Alert dialog
Confirm
The confirm dialog returns a bool value that indicates which button the user clicked - true for the OK button and false for the Cancel button. This lets you await its execution, and then continue the application logic based on that decision. The method that calls it must be async Task and not async void in order to await the execution.
Use a Confirm dialog
Prompt
The prompt dialog returns a string that the user enters when they press OK, and null when they press Cancel. This lets you await its execution, and then continue the application logic based on that decision. The method that calls it must be async Task and not async void in order to await the execution.
Use a Prompt dialog