Skip to content

866877: Correction in blazor Dialog UG section. #6403

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

Open
wants to merge 8 commits into
base: development
Choose a base branch
from
Open

866877: Correction in blazor Dialog UG section. #6403

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1213f0d
866877: Correction in blazor Dialog UG section.
Yuvan111 Aug 12, 2025
371691d
866877: Correction in blazor Dialog UG section.
Yuvan111 Aug 12, 2025
dc1a434
866877: Correction in blazor Dialog UG section.
Yuvan111 Aug 13, 2025
0d3f776
866877: Correction in blazor Dialog UG section.
Yuvan111 Aug 13, 2025
0d9d894
866877: Correction in blazor Dialog UG section
UdhayaKumarDuraisamy Aug 13, 2025
af1b46e
Merge branch 'development' into 866877-dev-dialo-reframe
Yuvan111 Aug 13, 2025
d9f909b
Update getting-started.md
UdhayaKumarDuraisamy Aug 13, 2025
09fc7f3
866877: Correction in blazor Dialog UG section.
Yuvan111 Aug 13, 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
25 changes: 14 additions & 11 deletions blazor-toc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2594,35 +2594,38 @@
</ul>
</li>
<li>
<a href="/blazor/dialog/draggable">Draggable</a>
<a href="/blazor/dialog/modal-dialog">Modal Dialog</a>
</li>
<li>
<a href="/blazor/dialog/dialogbuttons">Dialog Buttons</a>
<a href="/blazor/dialog/visibility">Visibility</a>
</li>
<li>
<a href="/blazor/dialog/minimize-and-maximize">Minimize and Maximize</a>
</li>
<li>
<a href="/blazor/dialog/show-dialog-with-fullscreen">Full Screen</a>
<a href="/blazor/dialog/template">Templates</a>
</li>
<li>
<a href="/blazor/dialog/state-persistent">Persistent State</a>
<a href="/blazor/dialog/positioning">Positioning</a>
</li>
<li>
<a href="/blazor/dialog/resize">Resizing</a>
</li>
<li>
<a href="/blazor/dialog/positioning">Positioning</a>
</li>
<li>
<a href="/blazor/dialog/template">Templates</a>
<a href="/blazor/dialog/draggable">Draggable</a>
</li>
<li>
<a href="/blazor/dialog/animation">Animation</a>
</li>
<li>
<a href="/blazor/dialog/style">Dialog Customization</a>
</li>
<li>
<a href="/blazor/dialog/minimize-and-maximize">Minimize and Maximize</a>
</li>
<li>
<a href="/blazor/dialog/show-dialog-with-fullscreen">Full Screen</a>
</li>
<li>
<a href="/blazor/dialog/state-persistent">Persistent State</a>
</li>
<li>
<a href="/blazor/dialog/localization">Localization</a>
</li>
Expand Down
2 changes: 2 additions & 0 deletions blazor/dialog/code-snippet/prerender-blazor-dialog.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons

<div id="target">
<div>
<button class="e-btn" @onclick="@OnBtnClick">Open</button>
Expand Down
137 changes: 34 additions & 103 deletions blazor/dialog/getting-started-with-web-app.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,154 +244,85 @@ html, body {
{% endhighlight %}
{% endtabs %}

## Prerender the Blazor dialog
## Created and Destroyed Events

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`.
- The [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_Created) event fires when the dialog is initialized and rendered in the DOM.

* By default, the [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_AllowPrerender) is set to `false` where the dialog DOM elements are destroyed while hiding the dialog and each time the dialog will be re-rendered when showing the dialog. The [@bind-Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_Visible) property of dialog also works based on the [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_AllowPrerender) property.
* If the [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_AllowPrerender) property is set to `true`, the dialog elements are maintained in the DOM when hiding the dialog.
- The [Destroyed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_Destroyed) event triggers when the dialog component is removed from the DOM. These lifecycle events allow executing custom code at specific points in the component's existence.

{% tabs %}
{% highlight cshtml %}

@using Syncfusion.Blazor.Buttons

{% include_relative code-snippet/prerender-blazor-dialog.razor %}

{% endhighlight %}
{% endtabs %}

{% 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

<SfButton @onclick="@OpenDialog">Open Modal Dialog</SfButton>
@using Syncfusion.Blazor.Popups

<SfDialog Width="250px" IsModal="true" @bind-Visible="@IsVisible">
<DialogEvents OnOverlayModalClick="@OnOverlayclick">
</DialogEvents>
<DialogTemplates>
<Content> This is a modal dialog </Content>
</DialogTemplates>
<SfDialog Width="250px" Header="Dialog Header" Content="Dialog Created & Destroyed">
<DialogEvents Created="@CreatedHandler" Destroyed="@DestroyedHandler"></DialogEvents>
</SfDialog>

@code {
private bool IsVisible { get; set; } = true;

private void OpenDialog()
@code{
private void CreatedHandler()
{
this.IsVisible = true;
// Here, you can customize your code.
}

private void OnOverlayclick(OverlayModalClickEventArgs arg)
private void DestroyedHandler()
{
this.IsVisible = false;
// Here, you can customize your code.
}
}

{% endhighlight %}
{% endtabs %}

## Enable header
## Prerender the Dialog

The [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_AllowPrerender) property controls how the dialog DOM elements are handled when the dialog is hidden. Understanding this property is crucial for optimizing performance in your application.

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.
* By default, AllowPrerender is set to false. In this mode, dialog DOM elements are completely removed from the DOM when the dialog is hidden, and recreated each time the dialog is shown. This approach saves memory but requires re-rendering on each display.
* When AllowPrerender is set to true, the dialog elements remain in the DOM even when hidden, which improves performance for frequently accessed dialogs but uses more memory.

{% tabs %}
{% highlight cshtml %}

@using Syncfusion.Blazor.Buttons
{% include_relative code-snippet/prerender-blazor-dialog.razor %}

<SfButton @onclick="@OpenDialog">Open Dialog</SfButton>
{% endhighlight %}
{% endtabs %}

<SfDialog Width="250px" ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsVisible">
<DialogTemplates>
<Header> Dialog </Header>
<Content> This is a dialog with header </Content>
</DialogTemplates>
</SfDialog>
{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVfjCBaAUCATHQS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

@code {
private bool IsVisible { get; set; } = true;
## Set Header to Dialog

private void OpenDialog()
{
this.IsVisible = true;
}
}
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.Popups

<SfDialog Width="250px" Header="Dialog Header"></SfDialog>

{% endhighlight %}
{% endtabs %}

{% 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

<SfButton @onclick="@OpenDialog">Open Dialog</SfButton>

<SfDialog Width="250px" ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsVisible">
<DialogTemplates>
<Header> Dialog </Header>
<Content> This is a Dialog with button and primary button </Content>
</DialogTemplates>
<DialogButtons>
<DialogButton Content="OK" IsPrimary="true" OnClick="@OkClick" />
<DialogButton Content="Cancel" OnClick="@CancelClick" />
</DialogButtons>
<span id="message">@ClickStatus</span>
</SfDialog>

@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;
}
}
<style>
#message {
color: blue;
}
</style>
<SfDialog Width="250px" Content="This is a dialog with Content property."></SfDialog>

{% 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).

Expand Down
Loading