diff --git a/components/dialog/header.md b/components/dialog/header.md index ad51e95aa..4c242eb6d 100644 --- a/components/dialog/header.md +++ b/components/dialog/header.md @@ -26,10 +26,6 @@ You can control the close action via the `ShowCloseButton` parameter. Its defaul The following example demonstrates how to set up the title through a template. The close action button is also hidden. ->caption The result from the code snippet. - -![Blazor Dialog Header](images/dialog-header.png) - >caption Title template and no close button in the Telerik Dialog. ````CSHTML diff --git a/components/dialog/images/alert-first-look.gif b/components/dialog/images/alert-first-look.gif deleted file mode 100644 index c28ed4750..000000000 Binary files a/components/dialog/images/alert-first-look.gif and /dev/null differ diff --git a/components/dialog/images/confirm-first-look.gif b/components/dialog/images/confirm-first-look.gif deleted file mode 100644 index 2a2098363..000000000 Binary files a/components/dialog/images/confirm-first-look.gif and /dev/null differ diff --git a/components/dialog/images/dialog-header.PNG b/components/dialog/images/dialog-header.PNG deleted file mode 100644 index 56811ec62..000000000 Binary files a/components/dialog/images/dialog-header.PNG and /dev/null differ diff --git a/components/dialog/images/dialog-visibility.gif b/components/dialog/images/dialog-visibility.gif deleted file mode 100644 index 1e03062e7..000000000 Binary files a/components/dialog/images/dialog-visibility.gif and /dev/null differ diff --git a/components/dialog/images/prompt-first-look.gif b/components/dialog/images/prompt-first-look.gif deleted file mode 100644 index 42b40c5af..000000000 Binary files a/components/dialog/images/prompt-first-look.gif and /dev/null differ diff --git a/components/dialog/predefined.md b/components/dialog/predefined.md index 16312945f..21bf60b7e 100644 --- a/components/dialog/predefined.md +++ b/components/dialog/predefined.md @@ -10,9 +10,12 @@ position: 2 # Predefined Dialogs - Alert, Confirm, Prompt -Telerik UI for Blazor provides styled substitutes to the standard confirm, alert, and prompt dialogs. 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. +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. -To use these dialogs (popup messages), receive a cascading parameter of type `Telerik.Blazor.DialogFactory`. It exposes the methods you can use in your method calls. + +## 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.
@@ -21,14 +24,28 @@ To use these dialogs (popup messages), receive a cascading parameter of type `Te public DialogFactory Dialogs { get; set; } ```` -The predefined dialogs can only be used inside child Razor components of the [`TelerikRootComponent`]({%slug rootcomponent-overview%}). This is easily achieved in standard Blazor apps where the `TelerikRootComponent` resides inside the layout file. When [using UI for Blazor in ASP.NET apps]({%slug telerik-blazor-in-asp-net-app%}), an additional child component is needed. - There are three available ready-made dialogs: * [Alert](#alert) * [Confirm](#confirm) * [Prompt](#prompt) +### TelerikRootComponent Dependency + +The `DialogFactory` cascading parameter can only be consumed inside child Razor components of the [`TelerikRootComponent`]({%slug rootcomponent-overview%}#purpose). This is easily achieved in standard Blazor apps where the `TelerikRootComponent` resides inside the layout file. + +* To show predefined dialogs in `MainLayout.razor`, [add the `TelerikRootComponent` in a parent layout]({%slug rootcomponent-overview%}#using-telerikrootcomponent). +* When [using UI for Blazor in ASP.NET apps]({%slug telerik-blazor-in-asp-net-app%}), an additional child component is needed. + +### Using await + +The `DialogFactory` methods must be awaited. Do not use them with [discard variables (`_`)](https://learn.microsoft.com/en-us/dotnet/csharp/fundamentals/functional/discards). If you don't need to await the user response, then [use the `` component]({%slug dialog-overview%}) 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 asyncronous 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]({%slug loadercontainer-overview%}) to block the whole user interface or a [specific component]({%slug loadercontainer-overview%}#fill-a-parent-container). + + ## 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]({%slug notification-overview%}) that is not modal and is small. @@ -69,7 +86,6 @@ The alert dialog is a Blazor popup message. It shows the user that something wen } ```` -![Telerik Alert dialog first look](images/alert-first-look.gif) ## Confirm @@ -118,8 +134,6 @@ The confirm dialog returns a `bool` value that indicates which button the user c } ```` -![Telerik Confirm dialog first look](images/confirm-first-look.gif) - ## Prompt @@ -176,10 +190,8 @@ The prompt dialog returns a `string` that the user enters when they press `OK`, } ```` -![Telerik Prompt dialog first look](images/prompt-first-look.gif) - ## See Also * [Live Demo: Predefined Dialogs](https://demos.telerik.com/blazor-ui/dialog/predefined-dialogs) - +* [Using the `` Component Declaratively]({%slug dialog-overview%})