Skip to content

866877: Correction in blazor Dialog UG section. #6390

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

Closed
wants to merge 5 commits into from
Closed

866877: Correction in blazor Dialog UG section. #6390

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b40ebd4
866877: Correction in blazor Dialog UG section.
Yuvan111 Aug 11, 2025
c5c20f4
866877: Correction in blazor Dialog UG section.
Yuvan111 Aug 11, 2025
ccbb24e
866877: Correction in blazor Dialog UG section.
Yuvan111 Aug 11, 2025
f2bd3ef
866877: Correction in blazor Dialog UG section.
Yuvan111 Aug 12, 2025
deff218
866877: Correction in blazor Dialog UG section.
Yuvan111 Aug 12, 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
12 changes: 9 additions & 3 deletions blazor-toc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2594,16 +2594,22 @@
</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/resize">Resizing</a>
<a href="/blazor/dialog/visibility">Visibility</a>
</li>
<li>
<a href="/blazor/dialog/template">Templates</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/resize">Resizing</a>
</li>
<li>
<a href="/blazor/dialog/animation">Animation</a>
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
115 changes: 9 additions & 106 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,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`.

Expand All @@ -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 %}
Expand All @@ -264,134 +262,39 @@ 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

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

<SfDialog Width="250px" IsModal="true" @bind-Visible="@IsVisible">
<DialogEvents OnOverlayModalClick="@OnOverlayclick">
</DialogEvents>
<DialogTemplates>
<Content> This is a modal dialog </Content>
</DialogTemplates>
</SfDialog>

@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

<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 header </Content>
</DialogTemplates>
</SfDialog>

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

private void OpenDialog()
{
this.IsVisible = true;
}
}
<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
117 changes: 10 additions & 107 deletions blazor/dialog/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`.

Expand All @@ -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 %}
Expand All @@ -194,134 +192,39 @@ 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

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

<SfDialog Width="250px" IsModal="true" @bind-Visible="@IsVisible">
<DialogEvents OnOverlayModalClick="@OnOverlayclick">
</DialogEvents>
<DialogTemplates>
<Content> This is a modal dialog </Content>
</DialogTemplates>
</SfDialog>

@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

<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 header </Content>
</DialogTemplates>
</SfDialog>

@code {
private bool IsVisible { get; set; } = true;
@using Syncfusion.Blazor.Popups

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

## See also

Expand Down
Binary file added blazor/dialog/images/blazor-dialog-content.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified blazor/dialog/images/blazor-dialog-header-footer-template.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified blazor/dialog/images/blazor-dialog-header.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added blazor/dialog/images/blazor-dialog-modal-closes.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added blazor/dialog/images/blazor-dialog-two-way-visible.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added blazor/dialog/images/blazor-dialog-visible-events.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified blazor/dialog/images/blazor-modal-dialog.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading