diff --git a/blazor-toc.html b/blazor-toc.html index 34cc4ec003..cf47c077f2 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -2594,16 +2594,22 @@
  • - Draggable + Modal Dialog
  • - Resizing + Visibility +
    • +
  • + Templates
  • Positioning
  • - Templates + Draggable +
    • +
  • + Resizing
  • Animation diff --git a/blazor/dialog/code-snippet/prerender-blazor-dialog.razor b/blazor/dialog/code-snippet/prerender-blazor-dialog.razor index 6ff9bc7618..4e3af59435 100644 --- a/blazor/dialog/code-snippet/prerender-blazor-dialog.razor +++ b/blazor/dialog/code-snippet/prerender-blazor-dialog.razor @@ -1,4 +1,6 @@ @using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Buttons +
    diff --git a/blazor/dialog/getting-started-with-web-app.md b/blazor/dialog/getting-started-with-web-app.md index 24a58c1812..38c0779aa6 100644 --- a/blazor/dialog/getting-started-with-web-app.md +++ b/blazor/dialog/getting-started-with-web-app.md @@ -244,7 +244,7 @@ html, body { {% endhighlight %} {% endtabs %} -## Prerender the Blazor dialog +## Prerender the Dialog The dialog component is maintained in the DOM after hiding the dialog when the [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_AllowPrerender) property is set to `true`. @@ -254,8 +254,6 @@ The dialog component is maintained in the DOM after hiding the dialog when the [ {% tabs %} {% highlight cshtml %} -@using Syncfusion.Blazor.Buttons - {% include_relative code-snippet/prerender-blazor-dialog.razor %} {% endhighlight %} @@ -264,70 +262,16 @@ The dialog component is maintained in the DOM after hiding the dialog when the [ {% previewsample "https://blazorplayground.syncfusion.com/embed/LDVfjCBaAUCATHQS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Prerender Blazor Dialog](./images/blazor-prerender-dialog.png) -## Modal Blazor dialog - -A `modal` shows an overlay behind the Dialog. So, the users must interact with the Dialog before interacting with the remaining content in an application. - -While the user clicks the overlay, the action can be handled through the [OnOverlayClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_OnOverlayClick) event. In the following code, it explains the Dialog close action performed while clicking the overlay. - -{% tabs %} -{% highlight cshtml %} - -@using Syncfusion.Blazor.Buttons - -Open Modal Dialog - - - - - - This is a modal dialog - - - -@code { - private bool IsVisible { get; set; } = true; - - private void OpenDialog() - { - this.IsVisible = true; - } - - private void OnOverlayclick(OverlayModalClickEventArgs arg) - { - this.IsVisible = false; - } -} - -{% endhighlight %} -{% endtabs %} +## Set Header to Dialog -## Enable header - -The Dialog header can be enabled by adding the header content as text or HTML content using the [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogTemplates.html#Syncfusion_Blazor_Popups_DialogTemplates_Header) template of the dialog. +The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogTemplates.html#Syncfusion_Blazor_Popups_DialogTemplates_Header) property allows rendering a dialog with custom text header. {% tabs %} {% highlight cshtml %} @using Syncfusion.Blazor.Buttons -Open Dialog - - - -
    Dialog
    - This is a dialog with header -     -     - -@code { - private bool IsVisible { get; set; } = true; - - private void OpenDialog() - { - this.IsVisible = true; - } -} + {% endhighlight %} {% endtabs %} @@ -335,63 +279,22 @@ The Dialog header can be enabled by adding the header content as text or HTML co {% previewsample "https://blazorplayground.syncfusion.com/embed/VDrJZWrYAArBuqod?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Dialog with Header](./images/blazor-dialog-header.png) -## Render Blazor Dialog with buttons +## Set Content to Dialog -By adding the [DialogButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButtons.html) can render a Dialog with buttons in Razor page. +The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_Content) property allows rendering a dialog with custom text content. {% tabs %} {% highlight cshtml %} -@using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.Popups -Open Dialog - - - -
    Dialog
    - This is a Dialog with button and primary button -     - - - - - @ClickStatus -     - -@code { - private bool IsVisible { get; set; } = true; - - private string ClickStatus { get; set; } - - private void OpenDialog() - { - this.IsVisible = true; - this.ClickStatus = ""; - } - - private void CancelClick() - { - this.ClickStatus = "you have clicked Cancel"; - this.IsVisible = false; - } - private void OkClick() - { - this.ClickStatus = "you have clicked Ok"; - this.IsVisible = true; - } -} - + {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVpjWVkggLndKKB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Dialog with Buttons](./images/blazor-dialog-buttons.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhIZPssAIpntkQY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Blazor Dialog with Content](./images/blazor-dialog-content.png) N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Dialog). diff --git a/blazor/dialog/getting-started.md b/blazor/dialog/getting-started.md index c7feac5c50..5a5d765856 100644 --- a/blazor/dialog/getting-started.md +++ b/blazor/dialog/getting-started.md @@ -174,7 +174,7 @@ html, body { {% endhighlight %} {% endtabs %} -## Prerender the Blazor dialog +## Prerender the Dialog The dialog component is maintained in the DOM after hiding the dialog when the [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_AllowPrerender) property is set to `true`. @@ -184,8 +184,6 @@ The dialog component is maintained in the DOM after hiding the dialog when the [ {% tabs %} {% highlight cshtml %} -@using Syncfusion.Blazor.Buttons - {% include_relative code-snippet/prerender-blazor-dialog.razor %} {% endhighlight %} @@ -194,70 +192,16 @@ The dialog component is maintained in the DOM after hiding the dialog when the [ {% previewsample "https://blazorplayground.syncfusion.com/embed/LDVfjCBaAUCATHQS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Prerender Blazor Dialog](./images/blazor-prerender-dialog.png) -## Modal Blazor dialog - -A `modal` shows an overlay behind the Dialog. So, the users must interact with the Dialog before interacting with the remaining content in an application. - -While the user clicks the overlay, the action can be handled through the [OnOverlayClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_OnOverlayClick) event. In the following code, it explains the Dialog close action performed while clicking the overlay. - -{% tabs %} -{% highlight cshtml %} - -@using Syncfusion.Blazor.Buttons - -Open Modal Dialog - - - - - - This is a modal dialog - - - -@code { - private bool IsVisible { get; set; } = true; - - private void OpenDialog() - { - this.IsVisible = true; - } - - private void OnOverlayclick(OverlayModalClickEventArgs arg) - { - this.IsVisible = false; - } -} - -{% endhighlight %} -{% endtabs %} - -## Enable header +## Set Header to Dialog -The Dialog header can be enabled by adding the header content as text or HTML content using the [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogTemplates.html#Syncfusion_Blazor_Popups_DialogTemplates_Header) template of the dialog. +The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogTemplates.html#Syncfusion_Blazor_Popups_DialogTemplates_Header) property allows rendering a dialog with custom text header. {% tabs %} {% highlight cshtml %} -@using Syncfusion.Blazor.Buttons - -Open Dialog - - - -
    Dialog
    - This is a dialog with header -     -     - -@code { - private bool IsVisible { get; set; } = true; +@using Syncfusion.Blazor.Popups - private void OpenDialog() - { - this.IsVisible = true; - } -} + {% endhighlight %} {% endtabs %} @@ -265,63 +209,22 @@ The Dialog header can be enabled by adding the header content as text or HTML co {% previewsample "https://blazorplayground.syncfusion.com/embed/VDrJZWrYAArBuqod?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Dialog with Header](./images/blazor-dialog-header.png) -## Render Blazor Dialog with buttons +## Set Content to Dialog -By adding the [DialogButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButtons.html) can render a Dialog with buttons in Razor page. +The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_Content) property allows rendering a dialog with custom text content. {% tabs %} {% highlight cshtml %} -@using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.Popups -Open Dialog - - - -
    Dialog
    - This is a Dialog with button and primary button -     - - - - - @ClickStatus -     - -@code { - private bool IsVisible { get; set; } = true; - - private string ClickStatus { get; set; } - - private void OpenDialog() - { - this.IsVisible = true; - this.ClickStatus = ""; - } - - private void CancelClick() - { - this.ClickStatus = "you have clicked Cancel"; - this.IsVisible = false; - } - private void OkClick() - { - this.ClickStatus = "you have clicked Ok"; - this.IsVisible = true; - } -} - + {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVpjWVkggLndKKB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Dialog with Buttons](./images/blazor-dialog-buttons.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhIZPssAIpntkQY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Blazor Dialog with Content](./images/blazor-dialog-content.png) ## See also diff --git a/blazor/dialog/images/blazor-dialog-content.png b/blazor/dialog/images/blazor-dialog-content.png new file mode 100644 index 0000000000..1f6159878d Binary files /dev/null and b/blazor/dialog/images/blazor-dialog-content.png differ diff --git a/blazor/dialog/images/blazor-dialog-header-footer-template.png b/blazor/dialog/images/blazor-dialog-header-footer-template.png index 6c0ea7b790..c45542173f 100644 Binary files a/blazor/dialog/images/blazor-dialog-header-footer-template.png and b/blazor/dialog/images/blazor-dialog-header-footer-template.png differ diff --git a/blazor/dialog/images/blazor-dialog-header.png b/blazor/dialog/images/blazor-dialog-header.png index 5be9721744..cb5a42240b 100644 Binary files a/blazor/dialog/images/blazor-dialog-header.png and b/blazor/dialog/images/blazor-dialog-header.png differ diff --git a/blazor/dialog/images/blazor-dialog-modal-closes.gif b/blazor/dialog/images/blazor-dialog-modal-closes.gif new file mode 100644 index 0000000000..9838d45f46 Binary files /dev/null and b/blazor/dialog/images/blazor-dialog-modal-closes.gif differ diff --git a/blazor/dialog/images/blazor-dialog-two-way-visible.gif b/blazor/dialog/images/blazor-dialog-two-way-visible.gif new file mode 100644 index 0000000000..598910d0ca Binary files /dev/null and b/blazor/dialog/images/blazor-dialog-two-way-visible.gif differ diff --git a/blazor/dialog/images/blazor-dialog-visible-events.gif b/blazor/dialog/images/blazor-dialog-visible-events.gif new file mode 100644 index 0000000000..a9754c9789 Binary files /dev/null and b/blazor/dialog/images/blazor-dialog-visible-events.gif differ diff --git a/blazor/dialog/images/blazor-modal-dialog.png b/blazor/dialog/images/blazor-modal-dialog.png index b8d32522af..03366053ca 100644 Binary files a/blazor/dialog/images/blazor-modal-dialog.png and b/blazor/dialog/images/blazor-modal-dialog.png differ diff --git a/blazor/dialog/modal-dialog.md b/blazor/dialog/modal-dialog.md new file mode 100644 index 0000000000..ff106d3d3e --- /dev/null +++ b/blazor/dialog/modal-dialog.md @@ -0,0 +1,63 @@ +--- +layout: post +title: Modal in Blazor Dialog Component | Syncfusion +description: Checkout and learn here all about Modal in Syncfusion Blazor Dialog component and much more details. +platform: Blazor +control: Dialog +documentation: ug +--- + +# Modal in Blazor Dialog Component + +Enabling the [IsModal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_IsModal) property shows an overlay behind the Dialog. So, the users must interact with the Dialog before interacting with the remaining content in an application. + +```cshtml + +@using Syncfusion.Blazor.Popups + + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBSjPWizivUyhUM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Modal in Blazor Dialog](./images/blazor-modal-dialog.png) + +## Overlay Modal Click Event + +The [OnOverlayModalClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_OnOverlayModalClick) event triggers when the dialog’s overlay area is clicked. This event can be used to perform actions such as closing the dialog or running custom logic when the user clicks outside the dialog popup. + +### Close Dialog When Clicking Outside of Its Region + +While the user clicks the overlay, the action can be handled through the `OnOverlayClick` event. In the following code, it explains the Dialog close action performed while clicking the overlay. + +{% tabs %} +{% highlight cshtml %} + +@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.Popups + +Open Modal Dialog + + + + + +@code { + private bool IsVisible { get; set; } = true; + + private void OpenDialog() + { + this.IsVisible = true; + } + + private void OnOverlayclick(OverlayModalClickEventArgs arg) + { + this.IsVisible = false; + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLeDFCMTCuSnnRi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Blazor Dialog with Modal Overlay](./images/blazor-dialog-modal-closes.gif) \ No newline at end of file diff --git a/blazor/dialog/positioning.md b/blazor/dialog/positioning.md index 4e306c1677..1bdc869b24 100644 --- a/blazor/dialog/positioning.md +++ b/blazor/dialog/positioning.md @@ -11,9 +11,17 @@ documentation: ug The [Blazor Dialog](https://www.syncfusion.com/blazor-components/blazor-modal-dialog) can be positioned using the `DialogPositionData` property by providing the X and Y coordinates. It can be positioned inside the target of the `container` or `` of the element based on the given X and Y values. +## DialogPositionData Properties + +The DialogPositionData class sets the dialog's X and Y coordinates. The position is relative to a specified Target or the page body if no target is defined. + For X is: left, center, right (or) any offset value For Y is: top, center, bottom (or) any offset value +## RefreshPositionAsync Method + +The [RefreshPositionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_RefreshPositionAsync) method is used to programmatically recalculate and update the dialog's position. It is useful for re-centering the dialog after events like browser window resizing or dynamic content changes that might affect its alignment. + The following code demonstrates the different Dialog positions. ```cshtml @@ -28,7 +36,7 @@ The following code demonstrates the different Dialog positions. }
    - +
    Choose a Dialog Position
    @@ -37,35 +45,35 @@ The following code demonstrates the different Dialog positions.
    - + - + - +
    - + - + - +
    - + - + - +
    @@ -81,30 +89,30 @@ The following code demonstrates the different Dialog positions. #defaultDialog table, #defaultDialog th, #defaultDialog td { - border: 1px solid #D8D8D8; - border-collapse: collapse; + border: 1px solid #D8D8D8; + border-collapse: collapse; } #defaultDialog.e-dialog .e-footer-content { - padding: 0px 10px 10px; - text-align: center; + padding: 0px 10px 10px; + text-align: center; } #target { - min-height: 450px; - height: 100%; + min-height: 450px; + height: 100%; } .e-dialog .e-dlg-content { - padding: 10px 16px 10px; + padding: 10px 16px 10px; } .e-radio + label .e-label { - line-height: 18px; + line-height: 18px; } td { - padding: 4px; + padding: 4px; } @@ -114,6 +122,7 @@ The following code demonstrates the different Dialog positions. private bool Visibility { get; set; } = true; private bool ShowButton { get; set; } = false; private string Checked { get; set; } = "center center"; + private SfDialog DialogObj { get; set; } private void BeforeDialogOpen(BeforeOpenEventArgs args) { @@ -130,17 +139,17 @@ The following code demonstrates the different Dialog positions. this.Visibility = true; } - private void OnChangeHandler(ChangeArgs arg) + private async void OnChangeHandler(ChangeEventArgs arg) { this.Xvalue = arg.Value.ToString().Split(' ')[0]; this.Yvalue = arg.Value.ToString().Split(' ')[1]; - this.StateHasChanged(); + await DialogObj.RefreshPositionAsync(); } } ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrIjPMrJQVdGhQV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Dialog displays Different Position](./images/blazor-dialog-position.png) diff --git a/blazor/dialog/template.md b/blazor/dialog/template.md index a082511cab..aae2435206 100644 --- a/blazor/dialog/template.md +++ b/blazor/dialog/template.md @@ -9,7 +9,7 @@ documentation: ug # Templates in Blazor Dialog Component -In [Blazor Dialog](https://www.syncfusion.com/blazor-components/blazor-modal-dialog), the template support is provided to the header and footer sections. So any text or HTML content can be appended in these sections. +In [Blazor Dialog](https://www.syncfusion.com/blazor-components/blazor-modal-dialog), the template support is provided to the header, content and footer sections. So any text or HTML content can be appended in these sections. To get started quickly with templates in Blazor Dialog Component, you can check the video below. @@ -19,13 +19,17 @@ To get started quickly with templates in Blazor Dialog Component, you can check The Dialog header content can be provided through the `Header` property, and it will allow both text and any HTML content as a string. Also in header, close button is provided as built-in support, and this can be enabled through the `ShowCloseIcon` property. +## Content + +The Dialog content can be provided through the `Content` property, and it will allow both text and any HTML content as a string. + ## Footer The Dialog footer can be enabled by adding built-in `DialogButton` or providing any HTML string through the `FooterTemplate`. N> The `DialogButton` and `FooterTemplate` properties can't be used at the same time. -The following example demonstrates the usage of header and footer template in the Dialog. +The following example demonstrates the usage of header, content and footer template in the Dialog. ```cshtml @@ -225,7 +229,7 @@ The following example demonstrates the usage of header and footer template in th ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXheXvMrAnOYVzla?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Dialog with Header and Footer Template](./images/blazor-dialog-header-footer-template.png) diff --git a/blazor/dialog/visibility.md b/blazor/dialog/visibility.md new file mode 100644 index 0000000000..03b32d3045 --- /dev/null +++ b/blazor/dialog/visibility.md @@ -0,0 +1,196 @@ +--- +layout: post +title: Visibility in Blazor Dialog Component | Syncfusion +description: Checkout and learn here all about Visibility in Syncfusion Blazor Dialog component and much more details. +platform: Blazor +control: Dialog +documentation: ug +--- + +# Visibility in Blazor Dialog Component + +The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_Visible) property controls whether the dialog is shown or hidden on the page. Setting it to true displays the dialog, while setting it to false hides the dialog from view. + +## Visibile + +### One-Way Binding + +One-way binding of the Visible property assigns a fixed value, so the dialog’s visibility cannot change at runtime. + +```cshtml + +@using Syncfusion.Blazor.Popups + + + +``` + +### Two-Way Binding + +Two-way binding of the Visible property uses the @bind-Visible syntax, allowing the dialog’s visibility to be updated both from code and user actions. When the value changes, the UI and the underlying variable stay in sync. + +```cshtml + +@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.Popups + +Open Modal Dialog + +Visible state: @IsVisible + + + + +@code { + private bool IsVisible { get; set; } = true; + + private void OpenDialog() + { + this.IsVisible = true; + } +} + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNretbWizzoIhYlS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Blazor Dialog with Header](./images/blazor-dialog-two-way-visible.gif) + +## ShowAsync Method + +The [ShowAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_ShowAsync_System_Nullable_System_Boolean__) method is used to programmatically open the dialog. Calling this method displays the dialog regardless of the Visible property or current state. + +```cshtml + +@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.Popups + +Open Modal Dialog + + + + +@code { + private SfDialog DialogObj { get; set; } + private async void OpenDialog() + { + await DialogObj.ShowAsync(); + } +} + +``` + +## HideAsync Method + +The [HideAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_HideAsync) method is used to programmatically close the dialog. Calling this method will hide the dialog, regardless of its current visibility state. + +```cshtml + +@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.Popups + +Open Modal Dialog + + + + + +@code { + private SfDialog DialogObj { get; set; } + private async void OpenDialog() + { + await DialogObj.ShowAsync(); + } + + private async void OnOverlayclick(OverlayModalClickEventArgs arg) + { + await DialogObj.HideAsync(); + } +} + +``` + +## CloseOnEscape Action + +The [CloseOnEscape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_CloseOnEscape) property determines whether the dialog will close when the Escape key is pressed. Setting this property to true enables closing the dialog with the Escape key; setting it to false disables this behavior. + +```cshtml + +@using Syncfusion.Blazor.Popups + + + +``` + +## Related Events + +### OnOpen + +The [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_OnOpen) event triggers when the dialog is being opened. + +### Opened + +The [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_Opened) event triggers when a dialog is opened. + +### OnClose + +The [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_OnClose) event triggers before the dialog is closed. + +### Closed + +The [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_Closed) event triggers after the dialog has been closed. + +{% tabs %} +{% highlight cshtml %} + +@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.Popups + +Open Modal Dialog + +Visible state: @IsVisible + +
    + @foreach (string evt in EventList) + { + @evt "Event Triggered" + } +
    + + + + + +@code { + private bool IsVisible { get; set; } = true; + private List EventList = new List(); + private void OpenDialog() + { + this.IsVisible = true; + } + + private void OnOpen(BeforeOpenEventArgs args) + { + EventList.Add("OnOpen"); + } + + private void Opened(OpenEventArgs args) + { + EventList.Add("Opened"); + } + + private void OnClose(BeforeCloseEventArgs args) + { + EventList.Add("OnClose"); + } + + private void Closed(CloseEventArgs args) + { + EventList.Add("Closed"); + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjreDlMsTcRmpfKb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Blazor Dialog with Header](./images/blazor-dialog-visible-events.gif) \ No newline at end of file