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.

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

Conversation

Yuvan111
Copy link
Contributor

866877: Correction in blazor Dialog UG section.

Specs: documentation.

@SyncfusionBuild
Copy link
Contributor

Build Status: INPROGRESS 🔃
Build Location: 866877-dev-dialo-reframe

@SyncfusionBuild
Copy link
Contributor

CI Status: FAILURE ❌
Source Compilation: SUCCESS ✅
Failure Reason: CI Failure with violation
Build Location: 866877-dev-dialo-reframe
Technical Error(s): 0
Spelling Error(s): 1
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 1
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

@SyncfusionBuild
Copy link
Contributor

Build Status: INPROGRESS 🔃
Build Location: 866877-dev-dialo-reframe

@SyncfusionBuild
Copy link
Contributor

CI Status: FAILURE ❌
Source Compilation: SUCCESS ✅
Failure Reason: CI Failure with violation
Build Location: 866877-dev-dialo-reframe
Technical Error(s): 0
Spelling Error(s): 1
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 5
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

{% 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
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use below Content

Handling Overlay Click Events

The OnOverlayModalClick event triggers when users click on the dialog's overlay area. This event enables custom functionality such as closing the dialog when users click outside the dialog content or implementing validation before allowing the dialog to close.

Close Dialog When Clicking Outside of Its Region

The following example demonstrates how to close a modal dialog when the user clicks on the overlay area outside the dialog content. This provides an intuitive way for users to dismiss the dialog.

{% tabs %}
{% highlight cshtml %}

@using Syncfusion.Blazor.Buttons
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use Proper Naming

@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Popups

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

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

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

    private void OpenDialog()
    {
        this.IsVisible = true;
    }

    private void OnOverlayClick(OverlayModalClickEventArgs arg)
    {
        this.IsVisible = false;
    }
}

Copy link
Collaborator

@UdhayaKumarDuraisamy UdhayaKumarDuraisamy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use AI prompts to refine the content. Also I have suggest some content. Please update it also.

@SyncfusionBuild
Copy link
Contributor

Build Status: INPROGRESS 🔃
Build Location: 866877-dev-dialo-reframe

@SyncfusionBuild
Copy link
Contributor

CI Status: FAILURE ❌
Source Compilation: SUCCESS ✅
Failure Reason: CI Failure with violation
Build Location: 866877-dev-dialo-reframe
Technical Error(s): 0
Spelling Error(s): 1
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

@SyncfusionBuild
Copy link
Contributor

Build Status: INPROGRESS 🔃
Build Location: 866877-dev-dialo-reframe

@SyncfusionBuild
Copy link
Contributor

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: 866877-dev-dialo-reframe
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

@SyncfusionBuild
Copy link
Contributor

Build Status: INPROGRESS 🔃
Build Location: 866877-dev-dialo-reframe

@SyncfusionBuild
Copy link
Contributor

CI Status: FAILURE ❌
Source Compilation: SUCCESS ✅
Failure Reason: CI Failure with violation
Build Location: 866877-dev-dialo-reframe
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 2

@SyncfusionBuild
Copy link
Contributor

Build Status: INPROGRESS 🔃
Build Location: 866877-dev-dialo-reframe

@SyncfusionBuild
Copy link
Contributor

CI Status: FAILURE ❌
Source Compilation: SUCCESS ✅
Failure Reason: CI Failure with violation
Build Location: 866877-dev-dialo-reframe
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 2

@SyncfusionBuild
Copy link
Contributor

Build Status: INPROGRESS 🔃
Build Location: 866877-dev-dialo-reframe

@SyncfusionBuild
Copy link
Contributor

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: 866877-dev-dialo-reframe
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

@@ -174,154 +174,85 @@ html, body {
{% endhighlight %}
{% endtabs %}

## Prerender the Blazor dialog
## Created and Destroyed Events
Copy link
Collaborator

@UdhayaKumarDuraisamy UdhayaKumarDuraisamy Aug 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Event not triggered.
  • Arguments not mentioned.
  • Preview not available.
  • GIF not available.

Copy link
Collaborator

@UdhayaKumarDuraisamy UdhayaKumarDuraisamy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • In most instances, the dialog code snippet is not functioning.
  • The argument data types are not mentioned correctly.
  • The preview and GIF have not been included.
  • Additionally, the content and header text in the code snippet and output GIF are incorrect.
  • Unwanted properties have been added to both the code snippet and the preview.
  • Furthermore, the style targeting the body has not been included, which results in the dialog being positioned incorrectly.
  • Please follow the Spec document for guidance.

@SyncfusionBuild
Copy link
Contributor

Build Status: INPROGRESS 🔃
Build Location: 866877-dev-dialo-reframe

@SyncfusionBuild
Copy link
Contributor

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: 866877-dev-dialo-reframe
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants