Syncfusion Blazor Popups

Implementing Syncfusion Blazor Popups

Dialog

The Syncfusion Blazor Dialog component provides a flexible, feature-rich solution for creating modal and modeless dialogs in Blazor applications. Dialogs are essential UI elements for displaying alerts, confirmations, forms, and interactive content overlaid on the main application.

Component Overview

The Dialog component supports:

• Template-based layouts (header, content, footer with custom HTML/components)
• Multiple interaction modes (modal and modeless)
• Rich event system (lifecycle, drag, resize, overlay interactions)
• Advanced positioning (fixed, absolute, relative, centered)
• Interactive features (draggable, resizable, minimize/maximize buttons, fullscreen mode)
• Accessibility support (WCAG compliance, keyboard navigation, ARIA attributes)
• Animations (open/close transitions)
• State management (visible binding, state persistence)

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and NuGet package setup
• Blazor WebAssembly and Server project configuration
• Adding namespaces and Syncfusion services
• Basic dialog implementation
• CSS imports and theme configuration
• Displaying header, content, and setting visibility

Templates and Content Customization

📄 Read: references/templates.md

• Header template with custom HTML and icons
• Content template with forms and Blazor components
• Footer template and custom buttons
• DialogTemplates structure
• Embedding complex UI elements in dialogs

Dialog Buttons

📄 Read: references/dialog-buttons.md

• DialogButton component configuration
• Button placement and click handlers
• Using DialogButtons vs FooterTemplate
• Standard button patterns and common use cases

Events and Interactions

📄 Read: references/events.md

• Lifecycle events (Created, Destroyed)
• Opening and closing events (OnOpen, Opened, OnClose, Closed)
• Drag events (OnDragStart, OnDrag, OnDragStop)
• Resize events (OnResizeStart, Resizing, OnResizeStop)
• Modal overlay interactions (OnOverlayModalClick)

Positioning and Visibility

📄 Read: references/positioning-visibility.md

• Position property (fixed, absolute, relative)
• Visible binding for show/hide control
• Target element configuration
• Dialog centering on page
• Width and height configuration
• Z-index management

Dialog Behavior and Features

📄 Read: references/dialog-behavior.md

• Modal vs modeless dialogs
• AllowDragging and EnableResize properties
• AllowPrerender for performance optimization
• ShowCloseIcon configuration
• Creating nested dialogs
• Animation support
• IsModal and overlay behavior

Methods and Programmatic Control

📄 Read: references/methods.md

• ShowAsync() to open dialogs programmatically
• ShowAsync(true) to open dialogs in fullscreen mode
• HideAsync() to close dialogs programmatically
• GetDimension() to retrieve dialog size
• GetButton(index) and GetButtonItems() for button access
• RefreshPositionAsync() for position recalculation
• Complete control examples

Advanced Customization and Styling

📄 Read: references/advanced-customization.md

• CSS class customization and styling
• Appearance customization
• Accessibility features (WCAG compliance, keyboard navigation)
• Animation configurations
• State persistence strategies with EnablePersistence
• Minimize/Maximize button implementation
• Localization support
• Responsive dialog design

Quick Start

Basic Dialog

@using Syncfusion.Blazor.Popups

<SfDialog Width="300px" Header="Welcome">
    <DialogTemplates>
        <Content>This is a basic dialog with content.</Content>
    </DialogTemplates>
</SfDialog>

Dialog with Show/Hide Control

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

<div id="target">
    <SfButton OnClick="@OpenDialog">Open Dialog</SfButton>
    
    <SfDialog Target="#target" Width="400px" Header="Confirmation" 
              ShowCloseIcon="true" @bind-Visible="IsVisible">
        <DialogTemplates>
            <Content>Are you sure you want to proceed?</Content>
        </DialogTemplates>
        <DialogButtons>
            <DialogButton Content="OK" IconCss="e-icons e-ok-icon" IsPrimary="true" OnClick="@OnOkClick" />
            <DialogButton Content="Cancel" IconCss="e-icons e-close-icon" OnClick="@OnCancelClick" />
        </DialogButtons>
    </SfDialog>
</div>

@code {
    private bool IsVisible { get; set; } = false;
    
    private void OpenDialog() => IsVisible = true;
    
    private void OnOkClick()
    {
        // Handle OK action
        IsVisible = false;
    }
    
    private void OnCancelClick()
    {
        // Handle Cancel action
        IsVisible = false;
    }
}

Common Patterns

Alert Dialog

<SfDialog Width="350px" IsModal="true" Header="Alert">
    <DialogTemplates>
        <Content>This action cannot be undone.</Content>
    </DialogTemplates>
</SfDialog>

Form Dialog

<SfDialog Width="400px" Header="User Information">
    <DialogTemplates>
        <Content>
            <div class="form-group">
                <input type="text" placeholder="Enter name" />
            </div>
        </Content>
    </DialogTemplates>
</SfDialog>

Draggable and Resizable Dialog

<SfDialog Width="400px" Header="Features" AllowDragging="true" EnableResize="true">
    <DialogTemplates>
        <Content>You can drag and resize this dialog.</Content>
    </DialogTemplates>
</SfDialog>

Fullscreen Dialog

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

<SfButton OnClick="@OpenFullScreenDialog">Open Fullscreen Dialog</SfButton>

<SfDialog @ref="DialogRef" Width="250px" ShowCloseIcon="true" Visible="false">
    <DialogTemplates>
        <Header>Dialog</Header>
        <Content>This is a fullscreen dialog</Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="OK" IsPrimary="true" OnClick="@CloseDialog" />
        <DialogButton Content="Cancel" OnClick="@CloseDialog" />
    </DialogButtons>
</SfDialog>

@code {
    SfDialog DialogRef;

    private async Task OpenFullScreenDialog()
    {
        await this.DialogRef.ShowAsync(true);
    }

    private async Task CloseDialog()
    {
        await this.DialogRef.HideAsync();
    }
}

Key Properties

Key Enums and Types

DialogEffect Enum

Animation effects for dialog open/close transitions:

ResizeDirection Enum

Directions from which the dialog can be resized:

ButtonType Enum

HTML button type attribute for dialog buttons:

DialogAnimationSettings Class

Configuration for dialog animations:

• Use ShowAsync(true) for fullscreen dialogs when you need maximum focus and screen real estate
• Set Visible="false" initially when using programmatic control with ShowAsync()

Example:

var animSettings = new DialogAnimationOptions 
{ 
    Effect = DialogEffect.Zoom, 
    Duration = 300, 
    Delay = 0 
};

DialogDimension Class

Returned by GetDimension() method:

Important Constraints and Notes

⚠️ Critical Requirements:

• ID Property: Must be set when using EnablePersistence="true". The ID serves as the localStorage key.
• Mutual Exclusivity: FooterTemplate and DialogButtons cannot be used together. Choose one approach.
• Target Selector: The Target property must reference a valid CSS selector for existing DOM elements.
• Resize Dependency: ResizeHandles only works when EnableResize="true".
• Position Context: The Position property affects how Left and Top coordinates are interpreted.

📋 Best Practices:

• Use IsModal="true" for critical actions requiring user attention
• Set AllowPrerender="true" for frequently toggled dialogs to improve performance
• Always provide a close mechanism (button, close icon, or Escape key)
• Use ZIndex values in increments (1000, 1001, 1002) for nested dialogs
• Test responsive behavior with percentage-based Width/Height values

Related Skills

• implementing-buttons - For dialog button styling and behavior
• implementing-dropdown-list - For select controls within dialogs
• implementing-text-inputs - For form fields in dialogs

---

See Also

• Syncfusion Blazor Dialog Documentation
• Dialog Events Reference
• Blazor Themes

Tooltips

The Syncfusion Blazor Tooltip component provides contextual information by displaying messages when users interact with target elements through hovering, clicking, or focusing. It supports rich content, flexible positioning, multiple trigger modes, and comprehensive customization options.

Component Overview

The Blazor Tooltip component offers:

• Multiple content types: Simple text, HTML title attributes, templates, RenderFragment, and MarkupString
• Flexible positioning: 12 static positions (TopLeft, TopCenter, TopRight, BottomLeft, etc.), mouse trailing, and custom offsets
• Open mode options: Hover, Click, Focus, Auto, Custom, and combinations
• Sticky mode: Keep tooltips open with a close button
• Customization: Full CSS control over wrapper, content, and tip pointer
• Dynamic targets: Support for elements added after component initialization
• Accessibility: WCAG 2.2 compliance with ARIA attributes and keyboard support
• Collision handling: Automatic repositioning when tooltips hit viewport boundaries

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Prerequisites and system requirements
• Package installation (Syncfusion.Blazor.Popups and Themes)
• Namespace imports and service registration
• Stylesheet and script resource setup
• Basic Tooltip implementation with Button
• WebAssembly App configuration
• Web App setup (Server, Client, Auto render modes)
• Interactive render mode configuration
• First Tooltip example

Content Management

📄 Read: references/content.md

• Simple text content using Content property
• Using HTML title attribute as tooltip content
• ContentTemplate for custom HTML layouts
• Dynamic content with RenderFragment
• Rendering HTML strings with MarkupString
• Interactive elements inside tooltips
• Images, formatted text, and links in tooltip content
• Complex tooltip layouts with multiple sections

Positioning and Placement

📄 Read: references/positioning.md

• Position property with 12 static options (TopLeft, TopCenter, TopRight, BottomLeft, BottomCenter, BottomRight, LeftTop, LeftCenter, LeftBottom, RightTop, RightCenter, RightBottom)
• Mouse trailing behavior (MouseTrail property)
• Offset configuration (OffsetX and OffsetY)
• Collision detection and automatic repositioning
• WindowCollision for viewport boundary handling
• Combining positions with offsets
• Best practices for position selection

Open Modes and Triggers

📄 Read: references/open-modes.md

• OpensOn property values (Auto, Hover, Click, Focus, Custom)
• Desktop vs mobile behavior differences
• Multiple trigger combinations (e.g., "Hover Click")
• Sticky mode (IsSticky) with close button
• Open and close delays (OpenDelay, CloseDelay)
• Custom trigger implementation with public methods
• Mobile tap and hold behavior
• Best practices for trigger selection

Customization and Styling

📄 Read: references/customization-and-styling.md

• CssClass property for custom styles
• Tip pointer customization (size, colors, shape)
• Tooltip wrapper and popup styling
• Content styling (font, color, padding)
• Arrow tip styling for all 4 directions
• Inner and outer tip CSS structure
• Complete CSS class reference
• Theme integration examples

Dimensions and Sizing

📄 Read: references/dimensions.md

• Width and Height properties
• Auto vs fixed sizing strategies
• Scroll mode for content overflow
• Combining Height with IsSticky for scrollable tooltips
• Responsive sizing considerations
• Content overflow handling

Target Configuration

📄 Read: references/target-configuration.md

• Target property with CSS selectors
• Single vs multiple target elements
• Dynamic target elements added after render
• TargetContainer for automatic registration
• GUID ID limitations (cannot start with digit)
• Best practices for target selection
• Examples with buttons, links, inputs, and custom elements

Accessibility

📄 Read: references/accessibility.md

• WCAG 2.2 and Section 508 compliance
• ARIA attributes (role="tooltip", aria-describedby, aria-hidden)
• Keyboard navigation (Tab for focus, Escape to close)
• Screen reader support
• Right-to-Left (RTL) language support
• Color contrast requirements
• Mobile device accessibility
• Axe-core validation
• Best practices for accessible tooltips

Quick Start Example

Basic Tooltip with Button

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

<SfTooltip ID="Tooltip" Target="#btn" Content="@Content">
    <SfButton ID="btn" Content="Show Tooltip"></SfButton>
</SfTooltip>

@code
{
    string Content = "Click to save your changes!";
}

Tooltip with Custom Position

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

<SfTooltip Target="#saveBtn" Content="Save changes" Position="Position.RightCenter">
    <SfButton ID="saveBtn" Content="Save"></SfButton>
</SfTooltip>

Multiple Tooltips Using Class Selector

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

<SfTooltip ID="Tooltip" Target=".action-btn" Content="Click to perform action">
    <div id="container">
        <SfButton ID="btn1" CssClass="action-btn" Content="Save" title="Save your work"></SfButton>
        <SfButton ID="btn2" CssClass="action-btn" Content="Cancel" title="Discard changes"></SfButton>
        <SfButton ID="btn3" CssClass="action-btn" Content="Delete" title="Remove item permanently"></SfButton>
    </div>
</SfTooltip>

Common Patterns

Sticky Tooltip with Click Trigger

<SfTooltip Target="#helpBtn" Content="Need help? Contact support at help@example.com" 
           OpensOn="Click" IsSticky="true">
    <SfButton ID="helpBtn" Content="Help" IconCss="e-icons e-help"></SfButton>
</SfTooltip>

Tooltip with HTML Template

<SfTooltip Target="#infoBtn" OpensOn="Click">
    <ContentTemplate>
        <div style="padding: 10px;">
            <h4 style="margin: 0 0 10px 0;">User Information</h4>
            <p><strong>Name:</strong> John Doe</p>
            <p><strong>Email:</strong> john@example.com</p>
            <p><strong>Status:</strong> Active</p>
        </div>
    </ContentTemplate>
    <ChildContent>
        <SfButton ID="infoBtn" Content="Info" IsPrimary="true"></SfButton>
    </ChildContent>
</SfTooltip>

Tooltip with Mouse Trailing

<SfTooltip MouseTrail="true" Content="Follow the cursor" Target="#trackArea">
    <div id="trackArea" style="width: 300px; height: 200px; border: 2px dashed #ccc; padding: 20px;">
        Hover over this area - the tooltip follows your mouse!
    </div>
</SfTooltip>

Custom Styled Tooltip

<SfTooltip Target="#customBtn" Content="Custom styled tooltip" CssClass="custom-tooltip">
    <SfButton ID="customBtn" Content="Hover Me"></SfButton>
</SfTooltip>

<style>
    .custom-tooltip.e-tooltip-wrap {
        background-color: #2196F3;
        border-radius: 8px;
    }
    
    .custom-tooltip.e-tooltip-wrap .e-tip-content {
        color: white;
        font-weight: 600;
        padding: 8px 12px;
    }
    
    .custom-tooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
        border-bottom: 10px solid #2196F3;
    }
</style>

Dynamic Targets with TargetContainer

<SfTooltip ID="dynamicTooltip" Target=".dynamic-item" TargetContainer="#app-container" Content="Dynamic content item">
</SfTooltip>

<div id="app-container">
    <button class="dynamic-item" title="Static button">Static</button>
    @if (showDynamic)
    {
        <button class="dynamic-item" title="Dynamically added button">Dynamic</button>
    }
</div>

@code {
    private bool showDynamic = false;
}

Key Properties

Essential Properties

Content Properties

Positioning Properties

Timing Properties

Event Callbacks

Public Methods

Appearance Properties

Target Properties

Key Types and Classes

AnimationModel Class

Configuration for tooltip open and close animations:

TooltipAnimationSettings Class

Detailed animation configuration:

Effect Enum

Animation effects for tooltip transitions:

Position Enum

Tooltip placement positions:

TipPointerPosition Enum

Arrow pointer placement on tooltip:

Common Use Cases

Form Field Help Text

Provide contextual help for form inputs:

• Read references/getting-started.md for basic setup
• Read references/open-modes.md for Focus trigger
• Use OpensOn="Focus" to show tooltip when input receives focus
• Position tooltip to avoid covering the input field

Icon Button Descriptions

Add descriptive text to icon-only buttons:

• Use simple Content property for short descriptions
• Set OpensOn="Hover" for immediate feedback
• Consider Position.TopCenter or Position.BottomCenter for consistency

Rich Content Cards

Display detailed information on hover:

• Read references/content.md for template options
• Use ContentTemplate with formatted HTML
• Include images, links, and formatted text
• Consider OpensOn="Click" and IsSticky="true" for complex content

Status Indicators

Show status details on hover:

• Use color-coded tooltips with CssClass
• Read references/customization-and-styling.md for styling
• Keep content concise and scannable

Dynamic Dashboard Elements

Add tooltips to dynamically added widgets:

• Read references/target-configuration.md for dynamic setup
• Use TargetContainer to handle elements added after initialization
• Use data attributes for tooltip content

Accessibility Enhancements

Ensure tooltips are accessible:

• Read references/accessibility.md for compliance
• Use semantic HTML in templates
• Ensure keyboard navigation works
• Test with screen readers
• Maintain color contrast ratios

Predefined Dialog

Component Overview

The Syncfusion Blazor Predefined Dialogs use a service-based architecture with two key components:

• SfDialogService - Registered service for opening dialogs programmatically
• SfDialogProvider - Component added to layout to enable dialog rendering

Key Features:

• Three dialog types: Alert, Confirm, Prompt
• Service-based invocation from anywhere in the app
• Customizable positioning, dimensions, and animations
• Draggable dialog support
• Button customization with icons
• Custom content rendering
• Built-in accessibility support

Package: Syncfusion.Blazor.Popups Namespace: Syncfusion.Blazor.Popups

---

Documentation and Navigation Guide

Getting Started (Setup & Basic Usage)

📄 Read: references/getting-started.md

• Prerequisites and system requirements
• Installation for Blazor WebAssembly, Server App, and Web App
• NuGet package installation (Syncfusion.Blazor.Popups)
• Import namespaces (_Imports.razor)
• Service registration (SfDialogService, AddSyncfusionBlazor)
• Adding SfDialogProvider to MainLayout
• Stylesheet and script references
• Alert dialog basics (AlertAsync method)
• Confirm dialog basics (ConfirmAsync method)
• Prompt dialog basics (PromptAsync method)
• Basic code examples for all three dialog types

Positioning Dialogs

📄 Read: references/positioning.md

• DialogOptions.Position property
• PositionDataModel configuration (X and Y)
• Position values: left, center, right, top, bottom, offset
• Customizing dialog position for alert, confirm, prompt
• Examples with top-center positioning

Draggable Dialogs

📄 Read: references/dragging.md

• DialogOptions.AllowDragging property
• Enabling drag behavior by dialog header
• Header visibility requirement
• Examples for draggable alert, confirm, prompt dialogs

Dialog Dimensions

📄 Read: references/dimensions.md

• DialogOptions.Width and Height properties
• Default auto-sizing behavior
• Setting dimensions in pixels or percentages
• Max-width and max-height using CssClass
• Min-width and min-height using CssClass
• Responsive sizing strategies
• Examples with custom dimensions

Customization Options

📄 Read: references/customization.md

• DialogOptions.PrimaryButtonOptions (OK button)
• DialogOptions.CancelButtonOptions (Cancel button)
• DialogButtonOptions.Content (button text)
• DialogButtonOptions.IconCss (button icons)
• DialogOptions.ShowCloseIcon property
• DialogOptions.ChildContent for custom content rendering
• Customizing alert, confirm, prompt dialogs
• Advanced content customization examples

Animation Effects

📄 Read: references/animation.md

• DialogOptions.AnimationSettings property
• DialogAnimationOptions configuration
• Animation Delay, Duration, and Effect
• DialogEffect enumeration values
• Zoom, fade, slide effects
• Examples with zoom animation

---

Quick Start Example

Basic Alert Dialog

@page "/alert-example"
@inject SfDialogService DialogService

<SfButton @onclick="ShowAlert">Show Alert</SfButton>

@code {
    private async Task ShowAlert()
    {
        await DialogService.AlertAsync("This is an alert message!");
    }
}

Basic Confirm Dialog

@page "/confirm-example"
@inject SfDialogService DialogService

<SfButton @onclick="ShowConfirm">Show Confirm</SfButton>
<p>@result</p>

@code {
    private string result = "";
    
    private async Task ShowConfirm()
    {
        bool isConfirmed = await DialogService.ConfirmAsync("Do you want to proceed?");
        result = isConfirmed ? "User clicked OK" : "User clicked Cancel";
    }
}

Basic Prompt Dialog

@page "/prompt-example"
@inject SfDialogService DialogService

<SfButton @onclick="ShowPrompt">Show Prompt</SfButton>
<p>@userInput</p>

@code {
    private string userInput = "";
    
    private async Task ShowPrompt()
    {
        string input = await DialogService.PromptAsync("Enter your name:");
        userInput = input ?? "User cancelled";
    }
}

---

Common Patterns

Pattern 1: Confirmation Before Delete

private async Task DeleteItem(int itemId)
{
    var options = new DialogOptions()
    {
        PrimaryButtonOptions = new DialogButtonOptions()
        {
            Content = "Delete",
            IconCss = "e-icons e-delete"
        },
        CancelButtonOptions = new DialogButtonOptions()
        {
            Content = "Cancel"
        }
    };
    
    bool confirmed = await DialogService.ConfirmAsync(
        "Are you sure you want to delete this item?", 
        "Confirm Delete", 
        options
    );
    
    if (confirmed)
    {
        // Perform delete operation
    }
}

Pattern 2: Positioned Dialog

private async Task ShowPositionedAlert()
{
    var options = new DialogOptions()
    {
        Position = new PositionDataModel()
        {
            X = "center",
            Y = "top"
        },
        Width = "400px",
        Height = "200px"
    };
    
    await DialogService.AlertAsync(
        "This dialog appears at the top center!",
        "Alert",
        options
    );
}

Pattern 3: Custom Content Prompt

private async Task ShowCustomPrompt()
{
    string username = "";
    
    var options = new DialogOptions()
    {
        ChildContent = @<div>
            <label>Username:</label>
            <input type="text" @bind="username" class="e-input" />
        </div>,
        PrimaryButtonOptions = new DialogButtonOptions() { Content = "Connect" },
        CancelButtonOptions = new DialogButtonOptions() { Content = "Close" }
    };
    
    await DialogService.PromptAsync("Enter your credentials:", "Login", options);
}

Pattern 4: Animated Draggable Dialog

private async Task ShowAnimatedDialog()
{
    var options = new DialogOptions()
    {
        AllowDragging = true,
        ShowCloseIcon = true,
        AnimationSettings = new DialogAnimationOptions()
        {
            Effect = DialogEffect.Zoom,
            Duration = 300,
            Delay = 0
        },
        Width = "500px"
    };
    
    await DialogService.AlertAsync(
        "Drag me around! I have zoom animation too!",
        "Draggable Dialog",
        options
    );
}

---

Key Properties

SfDialogService Methods

DialogOptions Properties

PositionDataModel Properties

DialogButtonOptions Properties

DialogAnimationSettings Properties

---

Common Use Cases

Use Case 1: Error/Warning/Info Messages

Display system messages, errors, warnings, or information requiring user acknowledgment using Alert dialogs.

Use Case 2: Critical Action Confirmation

Get user confirmation before destructive actions like delete, logout, or data loss operations using Confirm dialogs.

Use Case 3: User Input Collection

Collect simple text input like usernames, search queries, or configuration values using Prompt dialogs.

Use Case 4: Form Validation Feedback

Show validation errors or success messages with positioned dialogs that don't obstruct form fields.

Use Case 5: Custom Interactive Dialogs

Create complex interactive dialogs with custom content, multiple inputs, and customized buttons.

Use Case 6: Notification System

Build notification systems with animated, positioned dialogs that appear in specific screen areas.

---

Setup Requirements

Prerequisites: 1. Blazor WebAssembly, Server, or Web App project 2. .NET SDK installed 3. Visual Studio, VS Code, or .NET CLI

Required Packages:

• Syncfusion.Blazor.Popups
• Syncfusion.Blazor.Themes

Required Setup: 1. Register SfDialogService in Program.cs 2. Register AddSyncfusionBlazor() service 3. Add SfDialogProvider in MainLayout.razor 4. Include Syncfusion theme stylesheet in head 5. Include Syncfusion script reference in body 6. Import Syncfusion.Blazor.Popups namespace in _Imports.razor

Refer to references/getting-started.md for complete setup instructions for all Blazor app types.

Advanced Customization and Styling

Table of Contents

• CSS Class Customization
• Appearance Styling
• Accessibility
• State Persistence
• Minimize and Maximize
• Localization
• Responsive Design
• Advanced Patterns

CSS Class Customization

Apply custom CSS classes to dialogs for advanced styling and behavior control.

Using CssClass Property

@using Syncfusion.Blazor.Popups

<SfDialog Header="Custom Styled Dialog" CssClass="custom-dialog">
    <DialogTemplates>
        <Content>This dialog has custom CSS styling applied</Content>
    </DialogTemplates>
</SfDialog>

<style>
    .custom-dialog.e-dialog {
        background-color: #f5f5f5;
        border: 2px solid #2196F3;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .custom-dialog .e-dlg-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 15px;
    }

    .custom-dialog .e-dlg-content {
        padding: 20px;
        font-size: 14px;
        line-height: 1.6;
    }

    .custom-dialog .e-footer-content {
        padding: 15px;
        background-color: #fafafa;
        border-top: 1px solid #e0e0e0;
    }
</style>

Multiple Custom Classes

<SfDialog Header="Multi-Class Dialog" CssClass="custom-style premium-theme dark-mode">
    <DialogTemplates>
        <Content>Multiple CSS classes applied</Content>
    </DialogTemplates>
</SfDialog>

<style>
    .custom-style.e-dialog {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .premium-theme.e-dialog {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    .dark-mode.e-dialog {
        background-color: #2c3e50;
        color: #ecf0f1;
    }
</style>

Appearance Styling

Header Styling

@using Syncfusion.Blazor.Popups

<SfDialog Header="Styled Header" CssClass="styled-header">
    <DialogTemplates>
        <Content>Dialog with custom header styling</Content>
    </DialogTemplates>
</SfDialog>

<style>
    .styled-header.e-dialog {
        border: none;
    }

    .styled-header .e-dlg-header {
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
        color: white;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 20px;
        border-bottom: 3px solid #764ba2;
    }

    .styled-header .e-dlg-header-content {
        background-color: transparent;
    }
</style>

Content Styling

<SfDialog Header="Content Styling" CssClass="styled-content">
    <DialogTemplates>
        <Content>
            <p>Paragraph 1 with styling</p>
            <p>Paragraph 2 with styling</p>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
            </ul>
        </Content>
    </DialogTemplates>
</SfDialog>

<style>
    .styled-content .e-dlg-content {
        padding: 25px;
        background-color: #f9f9f9;
    }

    .styled-content .e-dlg-content p {
        margin: 10px 0;
        line-height: 1.8;
        color: #333;
    }

    .styled-content .e-dlg-content ul {
        list-style-type: none;
        padding: 0;
    }

    .styled-content .e-dlg-content li {
        padding: 8px 0;
        padding-left: 20px;
        position: relative;
    }

    .styled-content .e-dlg-content li:before {
        content: "✓";
        position: absolute;
        left: 0;
        color: #4caf50;
        font-weight: bold;
    }
</style>

Footer Styling

<SfDialog Header="Footer Styling" CssClass="styled-footer">
    <DialogTemplates>
        <Content>Dialog with styled footer</Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="OK" IsPrimary="true" />
        <DialogButton Content="Cancel" />
    </DialogButtons>
</SfDialog>

<style>
    .styled-footer .e-footer-content {
        background: linear-gradient(90deg, #f5f7fa 0%, #c3cfe2 100%);
        padding: 15px 25px;
        border-top: 2px solid #ddd;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }

    .styled-footer .e-btn {
        border-radius: 4px;
        padding: 8px 20px;
    }

    .styled-footer .e-btn.e-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
    }
</style>

Accessibility

WCAG Compliance

@using Syncfusion.Blazor.Popups

<SfDialog Header="Accessible Dialog" 
          ShowCloseIcon="true"
          CssClass="accessible-dialog">
    <DialogTemplates>
        <Header>
            <span role="heading" aria-level="2">Important Notification</span>
        </Header>
        <Content>
            <p role="region" aria-live="polite">
                This is an important message for you.
            </p>
            <form role="form">
                <label for="username">Username:</label>
                <input id="username" type="text" aria-required="true" />
            </form>
        </Content>
    </DialogTemplates>
</SfDialog>

<style>
    .accessible-dialog.e-dialog {
        min-width: 300px;
    }

    .accessible-dialog input {
        width: 100%;
        padding: 8px;
        margin-bottom: 10px;
    }
</style>

Keyboard Navigation

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

<SfDialog Header="Keyboard Accessible" 
          @bind-Visible="DialogVisible">
    <DialogTemplates>
        <Content>
            <p>Use Tab to navigate between buttons</p>
            <p>Press Enter to activate buttons</p>
            <p>Press Escape to close the dialog</p>
        </Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="OK" IsPrimary="true" OnClick="@OnOK" />
        <DialogButton Content="Cancel" OnClick="@OnCancel" />
    </DialogButtons>
</SfDialog>

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

    private void OnOK() => DialogVisible = false;
    private void OnCancel() => DialogVisible = false;
}

High Contrast Mode

<SfDialog Header="High Contrast" CssClass="high-contrast-dialog">
    <DialogTemplates>
        <Content>Enhanced contrast for visibility</Content>
    </DialogTemplates>
</SfDialog>

<style>
    @media (prefers-contrast: more) {
        .high-contrast-dialog.e-dialog {
            border: 3px solid #000;
        }

        .high-contrast-dialog .e-dlg-header {
            background-color: #000;
            color: #fff;
        }

        .high-contrast-dialog .e-dlg-content {
            color: #000;
            background-color: #fff;
        }
    }
</style>

State Persistence

Using EnablePersistence Property

The EnablePersistence property automatically persists dialog state (position, width, height) to browser local storage.

@using Syncfusion.Blazor.Popups

<SfDialog @bind-Visible="DialogVisible"
          Header="Persistent Dialog"
          Width="400px"
          Height="300px"
          EnablePersistence="true"
          ID="dialog_persist">
    <DialogTemplates>
        <Content>
            <p>This dialog's position, width, and height will be saved to browser local storage</p>
            <p>Close and reopen the page to see the dialog in the same position and size</p>
        </Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="Close" OnClick="@CloseDialog" />
    </DialogButtons>
</SfDialog>

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

    private void CloseDialog() => DialogVisible = false;
}

Important:

• ID property must be set for persistence to work (used as storage key)
• Persisted values: Position (Left, Top), Width, Height
• Persists to browser's local storage
• State persists across page reloads and browser sessions

Custom Save Dialog Dimensions (Manual Persistence)

@using Syncfusion.Blazor.Popups
@using System.Text.Json

<SfDialog @ref="DialogRef"
          @bind-Visible="DialogVisible"
          Width="@DialogWidth"
          Height="@DialogHeight"
          Header="Persistent Dialog">
    <DialogTemplates>
        <Content>Dialog state will be saved</Content>
    </DialogTemplates>
    <DialogEvents Closed="@SaveDialogState" />
</SfDialog>

@code {
    private SfDialog DialogRef { get; set; }
    private bool DialogVisible { get; set; } = true;
    private string DialogWidth { get; set; } = "400px";
    private string DialogHeight { get; set; } = "300px";

    protected override async Task OnInitializedAsync()
    {
        // Load saved state from localStorage
        var savedState = await JSRuntime.InvokeAsync<string>("localStorage.getItem", "dialogState");
        if (!string.IsNullOrEmpty(savedState))
        {
            var state = JsonSerializer.Deserialize<DialogState>(savedState);
            DialogWidth = state?.Width ?? "400px";
            DialogHeight = state?.Height ?? "300px";
        }
    }

    private async Task SaveDialogState()
    {
        var state = new DialogState { Width = DialogWidth, Height = DialogHeight };
        var json = JsonSerializer.Serialize(state);
        await JSRuntime.InvokeVoidAsync("localStorage.setItem", "dialogState", json);
    }

    private class DialogState
    {
        public string Width { get; set; }
        public string Height { get; set; }
    }
}

Minimize and Maximize

Custom Minimize/Maximize Buttons

@using Syncfusion.Blazor.Popups

<SfDialog Width="400px" Height="300px" Header="Minimizable Dialog" CssClass="minimizable">
    <DialogTemplates>
        <Header>
            <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
                <span>Dialog Title</span>
                <div>
                    <button @onclick="@MinimizeDialog" 
                            style="background: none; border: none; cursor: pointer; margin-right: 10px;">
                        _
                    </button>
                    <button @onclick="@CloseDialog" 
                            style="background: none; border: none; cursor: pointer;">
                        ×
                    </button>
                </div>
            </div>
        </Header>
        <Content>
            <p>Click the minimize button to collapse the dialog</p>
        </Content>
    </DialogTemplates>
</SfDialog>

<style>
    .minimizable.e-dialog {
        transition: all 0.3s ease;
    }

    .minimizable.minimized {
        height: 40px !important;
        overflow: hidden;
    }

    .minimizable.minimized .e-dlg-content,
    .minimizable.minimized .e-footer-content {
        display: none;
    }
</style>

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

    private void MinimizeDialog()
    {
        IsMinimized = !IsMinimized;
        StateHasChanged();
    }

    private void CloseDialog()
    {
        // Close logic
    }
}

Localization

Multi-Language Support

@using Syncfusion.Blazor.Popups

<select @onchange="@ChangeLanguage">
    <option value="en">English</option>
    <option value="es">Spanish</option>
    <option value="fr">French</option>
</select>

<SfDialog Header="@GetLocalizedHeader()" Width="400px">
    <DialogTemplates>
        <Content>@GetLocalizedContent()</Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="@GetLocalizedButtonOK()" IsPrimary="true" />
        <DialogButton Content="@GetLocalizedButtonCancel()" />
    </DialogButtons>
</SfDialog>

@code {
    private string CurrentLanguage { get; set; } = "en";

    private Dictionary<string, Dictionary<string, string>> Translations = new()
    {
        {
            "en", new Dictionary<string, string>
            {
                { "header", "Welcome" },
                { "content", "Welcome to our application" },
                { "ok", "OK" },
                { "cancel", "Cancel" }
            }
        },
        {
            "es", new Dictionary<string, string>
            {
                { "header", "Bienvenido" },
                { "content", "Bienvenido a nuestra aplicación" },
                { "ok", "OK" },
                { "cancel", "Cancelar" }
            }
        },
        {
            "fr", new Dictionary<string, string>
            {
                { "header", "Bienvenue" },
                { "content", "Bienvenue dans notre application" },
                { "ok", "OK" },
                { "cancel", "Annuler" }
            }
        }
    };

    private void ChangeLanguage(ChangeEventArgs e)
    {
        CurrentLanguage = e.Value?.ToString() ?? "en";
    }

    private string GetLocalizedHeader() => Translations[CurrentLanguage]["header"];
    private string GetLocalizedContent() => Translations[CurrentLanguage]["content"];
    private string GetLocalizedButtonOK() => Translations[CurrentLanguage]["ok"];
    private string GetLocalizedButtonCancel() => Translations[CurrentLanguage]["cancel"];
}

Responsive Design

Mobile-Friendly Dialog

@using Syncfusion.Blazor.Popups

<SfDialog Header="Responsive Dialog" 
          CssClass="responsive-dialog"
          Width="90%"
          @bind-Visible="DialogVisible">
    <DialogTemplates>
        <Content>
            <p>This dialog adapts to different screen sizes</p>
            <img src="responsive-image.png" style="max-width: 100%; height: auto;" />
        </Content>
    </DialogTemplates>
</SfDialog>

<style>
    /* Large screens */
    @media (min-width: 1200px) {
        .responsive-dialog.e-dialog {
            width: 50% !important;
        }
    }

    /* Medium screens */
    @media (min-width: 768px) and (max-width: 1199px) {
        .responsive-dialog.e-dialog {
            width: 70% !important;
        }
    }

    /* Small screens */
    @media (max-width: 767px) {
        .responsive-dialog.e-dialog {
            width: 95% !important;
            height: auto !important;
            max-height: 90vh;
        }

        .responsive-dialog .e-dlg-content {
            padding: 15px;
        }
    }
</style>

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

Advanced Patterns

Context Menu Dialog

@using Syncfusion.Blazor.Popups

<div @oncontextmenu:preventDefault 
     @oncontextmenu="@ShowContextMenu"
     style="width: 400px; height: 300px; border: 1px solid #ccc; padding: 20px;">
    Right-click to see context menu
</div>

<SfDialog @bind-Visible="ShowMenu" Header="Context Menu" Width="200px" CssClass="context-menu">
    <DialogTemplates>
        <Content>
            <ul style="list-style: none; padding: 0; margin: 0;">
                <li><a href="#" @onclick="@OnEdit">Edit</a></li>
                <li><a href="#" @onclick="@OnDelete">Delete</a></li>
                <li><a href="#" @onclick="@OnShare">Share</a></li>
            </ul>
        </Content>
    </DialogTemplates>
</SfDialog>

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

    private void ShowContextMenu(MouseEventArgs e)
    {
        ShowMenu = true;
    }

    private void OnEdit() => ShowMenu = false;
    private void OnDelete() => ShowMenu = false;
    private void OnShare() => ShowMenu = false;
}

Loading Dialog

@using Syncfusion.Blazor.Popups

<SfDialog IsModal="true" 
          Header="Processing" 
          ShowCloseIcon="false"
          EnableResize="false"
          AllowDragging="false"
          Width="300px"
          CssClass="loading-dialog">
    <DialogTemplates>
        <Content>
            <div style="text-align: center; padding: 20px;">
                <div class="spinner"></div>
                <p>@LoadingMessage</p>
            </div>
        </Content>
    </DialogTemplates>
</SfDialog>

<style>
    .spinner {
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
        margin: 0 auto;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>

@code {
    private string LoadingMessage { get; set; } = "Loading...";
}

Best Practices

1. Semantic HTML: Use proper semantic HTML in dialog templates 2. ARIA Labels: Include aria-labels for screen reader users 3. Color Contrast: Ensure sufficient color contrast for accessibility 4. Responsive Units: Use percentages or viewport units for responsiveness 5. Performance: Minimize redraws and use CSS transforms when possible 6. Keyboard Support: Test all interactive elements with keyboard navigation 7. Mobile Testing: Test dialogs on actual mobile devices 8. Theme Consistency: Match dialog styling to your application theme 9. Error Handling: Handle edge cases in custom styling 10. Documentation: Comment complex CSS classes for maintainability

Advanced Customization and Styling

Table of Contents

• CSS Class Customization
• Appearance Styling
• Accessibility
• State Persistence
• Minimize and Maximize
• Localization
• Responsive Design
• Advanced Patterns

CSS Class Customization

Apply custom CSS classes to dialogs for advanced styling and behavior control.

Using CssClass Property

@using Syncfusion.Blazor.Popups

<SfDialog Header="Custom Styled Dialog" CssClass="custom-dialog">
    <DialogTemplates>
        <Content>This dialog has custom CSS styling applied</Content>
    </DialogTemplates>
</SfDialog>

<style>
    .custom-dialog.e-dialog {
        background-color: #f5f5f5;
        border: 2px solid #2196F3;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .custom-dialog .e-dlg-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 15px;
    }

    .custom-dialog .e-dlg-content {
        padding: 20px;
        font-size: 14px;
        line-height: 1.6;
    }

    .custom-dialog .e-footer-content {
        padding: 15px;
        background-color: #fafafa;
        border-top: 1px solid #e0e0e0;
    }
</style>

Multiple Custom Classes

<SfDialog Header="Multi-Class Dialog" CssClass="custom-style premium-theme dark-mode">
    <DialogTemplates>
        <Content>Multiple CSS classes applied</Content>
    </DialogTemplates>
</SfDialog>

<style>
    .custom-style.e-dialog {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .premium-theme.e-dialog {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    .dark-mode.e-dialog {
        background-color: #2c3e50;
        color: #ecf0f1;
    }
</style>

Appearance Styling

Header Styling

@using Syncfusion.Blazor.Popups

<SfDialog Header="Styled Header" CssClass="styled-header">
    <DialogTemplates>
        <Content>Dialog with custom header styling</Content>
    </DialogTemplates>
</SfDialog>

<style>
    .styled-header.e-dialog {
        border: none;
    }

    .styled-header .e-dlg-header {
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
        color: white;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 20px;
        border-bottom: 3px solid #764ba2;
    }

    .styled-header .e-dlg-header-content {
        background-color: transparent;
    }
</style>

Content Styling

<SfDialog Header="Content Styling" CssClass="styled-content">
    <DialogTemplates>
        <Content>
            <p>Paragraph 1 with styling</p>
            <p>Paragraph 2 with styling</p>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
            </ul>
        </Content>
    </DialogTemplates>
</SfDialog>

<style>
    .styled-content .e-dlg-content {
        padding: 25px;
        background-color: #f9f9f9;
    }

    .styled-content .e-dlg-content p {
        margin: 10px 0;
        line-height: 1.8;
        color: #333;
    }

    .styled-content .e-dlg-content ul {
        list-style-type: none;
        padding: 0;
    }

    .styled-content .e-dlg-content li {
        padding: 8px 0;
        padding-left: 20px;
        position: relative;
    }

    .styled-content .e-dlg-content li:before {
        content: "✓";
        position: absolute;
        left: 0;
        color: #4caf50;
        font-weight: bold;
    }
</style>

Footer Styling

<SfDialog Header="Footer Styling" CssClass="styled-footer">
    <DialogTemplates>
        <Content>Dialog with styled footer</Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="OK" IsPrimary="true" />
        <DialogButton Content="Cancel" />
    </DialogButtons>
</SfDialog>

<style>
    .styled-footer .e-footer-content {
        background: linear-gradient(90deg, #f5f7fa 0%, #c3cfe2 100%);
        padding: 15px 25px;
        border-top: 2px solid #ddd;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }

    .styled-footer .e-btn {
        border-radius: 4px;
        padding: 8px 20px;
    }

    .styled-footer .e-btn.e-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
    }
</style>

Accessibility

WCAG Compliance

@using Syncfusion.Blazor.Popups

<SfDialog Header="Accessible Dialog" 
          ShowCloseIcon="true"
          CssClass="accessible-dialog">
    <DialogTemplates>
        <Header>
            <span role="heading" aria-level="2">Important Notification</span>
        </Header>
        <Content>
            <p role="region" aria-live="polite">
                This is an important message for you.
            </p>
            <form role="form">
                <label for="username">Username:</label>
                <input id="username" type="text" aria-required="true" />
            </form>
        </Content>
    </DialogTemplates>
</SfDialog>

<style>
    .accessible-dialog.e-dialog {
        min-width: 300px;
    }

    .accessible-dialog input {
        width: 100%;
        padding: 8px;
        margin-bottom: 10px;
    }
</style>

Keyboard Navigation

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

<SfDialog Header="Keyboard Accessible" 
          @bind-Visible="DialogVisible">
    <DialogTemplates>
        <Content>
            <p>Use Tab to navigate between buttons</p>
            <p>Press Enter to activate buttons</p>
            <p>Press Escape to close the dialog</p>
        </Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="OK" IsPrimary="true" OnClick="@OnOK" />
        <DialogButton Content="Cancel" OnClick="@OnCancel" />
    </DialogButtons>
</SfDialog>

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

    private void OnOK() => DialogVisible = false;
    private void OnCancel() => DialogVisible = false;
}

High Contrast Mode

<SfDialog Header="High Contrast" CssClass="high-contrast-dialog">
    <DialogTemplates>
        <Content>Enhanced contrast for visibility</Content>
    </DialogTemplates>
</SfDialog>

<style>
    @media (prefers-contrast: more) {
        .high-contrast-dialog.e-dialog {
            border: 3px solid #000;
        }

        .high-contrast-dialog .e-dlg-header {
            background-color: #000;
            color: #fff;
        }

        .high-contrast-dialog .e-dlg-content {
            color: #000;
            background-color: #fff;
        }
    }
</style>

State Persistence

Using EnablePersistence Property

The EnablePersistence property automatically persists dialog state (position, width, height) to browser local storage.

@using Syncfusion.Blazor.Popups

<SfDialog @bind-Visible="DialogVisible"
          Header="Persistent Dialog"
          Width="400px"
          Height="300px"
          EnablePersistence="true"
          ID="dialog_persist">
    <DialogTemplates>
        <Content>
            <p>This dialog's position, width, and height will be saved to browser local storage</p>
            <p>Close and reopen the page to see the dialog in the same position and size</p>
        </Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="Close" OnClick="@CloseDialog" />
    </DialogButtons>
</SfDialog>

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

    private void CloseDialog() => DialogVisible = false;
}

Important:

• ID property must be set for persistence to work (used as storage key)
• Persisted values: Position (Left, Top), Width, Height
• Persists to browser's local storage
• State persists across page reloads and browser sessions

Custom Save Dialog Dimensions (Manual Persistence)

@using Syncfusion.Blazor.Popups
@using System.Text.Json

<SfDialog @ref="DialogRef"
          @bind-Visible="DialogVisible"
          Width="@DialogWidth"
          Height="@DialogHeight"
          Header="Persistent Dialog">
    <DialogTemplates>
        <Content>Dialog state will be saved</Content>
    </DialogTemplates>
    <DialogEvents Closed="@SaveDialogState" />
</SfDialog>

@code {
    private SfDialog DialogRef { get; set; }
    private bool DialogVisible { get; set; } = true;
    private string DialogWidth { get; set; } = "400px";
    private string DialogHeight { get; set; } = "300px";

    protected override async Task OnInitializedAsync()
    {
        // Load saved state from localStorage
        var savedState = await JSRuntime.InvokeAsync<string>("localStorage.getItem", "dialogState");
        if (!string.IsNullOrEmpty(savedState))
        {
            var state = JsonSerializer.Deserialize<DialogState>(savedState);
            DialogWidth = state?.Width ?? "400px";
            DialogHeight = state?.Height ?? "300px";
        }
    }

    private async Task SaveDialogState()
    {
        var state = new DialogState { Width = DialogWidth, Height = DialogHeight };
        var json = JsonSerializer.Serialize(state);
        await JSRuntime.InvokeVoidAsync("localStorage.setItem", "dialogState", json);
    }

    private class DialogState
    {
        public string Width { get; set; }
        public string Height { get; set; }
    }
}

Minimize and Maximize

Custom Minimize/Maximize Buttons

@using Syncfusion.Blazor.Popups

<SfDialog Width="400px" Height="300px" Header="Minimizable Dialog" CssClass="minimizable">
    <DialogTemplates>
        <Header>
            <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
                <span>Dialog Title</span>
                <div>
                    <button @onclick="@MinimizeDialog" 
                            style="background: none; border: none; cursor: pointer; margin-right: 10px;">
                        _
                    </button>
                    <button @onclick="@CloseDialog" 
                            style="background: none; border: none; cursor: pointer;">
                        ×
                    </button>
                </div>
            </div>
        </Header>
        <Content>
            <p>Click the minimize button to collapse the dialog</p>
        </Content>
    </DialogTemplates>
</SfDialog>

<style>
    .minimizable.e-dialog {
        transition: all 0.3s ease;
    }

    .minimizable.minimized {
        height: 40px !important;
        overflow: hidden;
    }

    .minimizable.minimized .e-dlg-content,
    .minimizable.minimized .e-footer-content {
        display: none;
    }
</style>

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

    private void MinimizeDialog()
    {
        IsMinimized = !IsMinimized;
        StateHasChanged();
    }

    private void CloseDialog()
    {
        // Close logic
    }
}

Localization

Multi-Language Support

@using Syncfusion.Blazor.Popups

<select @onchange="@ChangeLanguage">
    <option value="en">English</option>
    <option value="es">Spanish</option>
    <option value="fr">French</option>
</select>

<SfDialog Header="@GetLocalizedHeader()" Width="400px">
    <DialogTemplates>
        <Content>@GetLocalizedContent()</Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="@GetLocalizedButtonOK()" IsPrimary="true" />
        <DialogButton Content="@GetLocalizedButtonCancel()" />
    </DialogButtons>
</SfDialog>

@code {
    private string CurrentLanguage { get; set; } = "en";

    private Dictionary<string, Dictionary<string, string>> Translations = new()
    {
        {
            "en", new Dictionary<string, string>
            {
                { "header", "Welcome" },
                { "content", "Welcome to our application" },
                { "ok", "OK" },
                { "cancel", "Cancel" }
            }
        },
        {
            "es", new Dictionary<string, string>
            {
                { "header", "Bienvenido" },
                { "content", "Bienvenido a nuestra aplicación" },
                { "ok", "OK" },
                { "cancel", "Cancelar" }
            }
        },
        {
            "fr", new Dictionary<string, string>
            {
                { "header", "Bienvenue" },
                { "content", "Bienvenue dans notre application" },
                { "ok", "OK" },
                { "cancel", "Annuler" }
            }
        }
    };

    private void ChangeLanguage(ChangeEventArgs e)
    {
        CurrentLanguage = e.Value?.ToString() ?? "en";
    }

    private string GetLocalizedHeader() => Translations[CurrentLanguage]["header"];
    private string GetLocalizedContent() => Translations[CurrentLanguage]["content"];
    private string GetLocalizedButtonOK() => Translations[CurrentLanguage]["ok"];
    private string GetLocalizedButtonCancel() => Translations[CurrentLanguage]["cancel"];
}

Responsive Design

Mobile-Friendly Dialog

@using Syncfusion.Blazor.Popups

<SfDialog Header="Responsive Dialog" 
          CssClass="responsive-dialog"
          Width="90%"
          @bind-Visible="DialogVisible">
    <DialogTemplates>
        <Content>
            <p>This dialog adapts to different screen sizes</p>
            <img src="responsive-image.png" style="max-width: 100%; height: auto;" />
        </Content>
    </DialogTemplates>
</SfDialog>

<style>
    /* Large screens */
    @media (min-width: 1200px) {
        .responsive-dialog.e-dialog {
            width: 50% !important;
        }
    }

    /* Medium screens */
    @media (min-width: 768px) and (max-width: 1199px) {
        .responsive-dialog.e-dialog {
            width: 70% !important;
        }
    }

    /* Small screens */
    @media (max-width: 767px) {
        .responsive-dialog.e-dialog {
            width: 95% !important;
            height: auto !important;
            max-height: 90vh;
        }

        .responsive-dialog .e-dlg-content {
            padding: 15px;
        }
    }
</style>

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

Advanced Patterns

Context Menu Dialog

@using Syncfusion.Blazor.Popups

<div @oncontextmenu:preventDefault 
     @oncontextmenu="@ShowContextMenu"
     style="width: 400px; height: 300px; border: 1px solid #ccc; padding: 20px;">
    Right-click to see context menu
</div>

<SfDialog @bind-Visible="ShowMenu" Header="Context Menu" Width="200px" CssClass="context-menu">
    <DialogTemplates>
        <Content>
            <ul style="list-style: none; padding: 0; margin: 0;">
                <li><a href="#" @onclick="@OnEdit">Edit</a></li>
                <li><a href="#" @onclick="@OnDelete">Delete</a></li>
                <li><a href="#" @onclick="@OnShare">Share</a></li>
            </ul>
        </Content>
    </DialogTemplates>
</SfDialog>

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

    private void ShowContextMenu(MouseEventArgs e)
    {
        ShowMenu = true;
    }

    private void OnEdit() => ShowMenu = false;
    private void OnDelete() => ShowMenu = false;
    private void OnShare() => ShowMenu = false;
}

Loading Dialog

@using Syncfusion.Blazor.Popups

<SfDialog IsModal="true" 
          Header="Processing" 
          ShowCloseIcon="false"
          EnableResize="false"
          AllowDragging="false"
          Width="300px"
          CssClass="loading-dialog">
    <DialogTemplates>
        <Content>
            <div style="text-align: center; padding: 20px;">
                <div class="spinner"></div>
                <p>@LoadingMessage</p>
            </div>
        </Content>
    </DialogTemplates>
</SfDialog>

<style>
    .spinner {
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
        margin: 0 auto;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>

@code {
    private string LoadingMessage { get; set; } = "Loading...";
}

Best Practices

1. Semantic HTML: Use proper semantic HTML in dialog templates 2. ARIA Labels: Include aria-labels for screen reader users 3. Color Contrast: Ensure sufficient color contrast for accessibility 4. Responsive Units: Use percentages or viewport units for responsiveness 5. Performance: Minimize redraws and use CSS transforms when possible 6. Keyboard Support: Test all interactive elements with keyboard navigation 7. Mobile Testing: Test dialogs on actual mobile devices 8. Theme Consistency: Match dialog styling to your application theme 9. Error Handling: Handle edge cases in custom styling 10. Documentation: Comment complex CSS classes for maintainability

Dialog Behavior and Features

Table of Contents

• Modal vs Modeless
• Draggable Dialogs
• Resizable Dialogs
• AllowPrerender
• Close Icon
• Nested Dialogs
• Animations
• Best Practices

Modal vs Modeless

Modal Dialog (Blocking)

A modal dialog displays an overlay that prevents interaction with the rest of the page until the dialog is closed.

When to Use Modal:

• Critical confirmations (delete operations)
• Required form submissions
• Important alerts requiring user attention
• Capturing essential user input

@using Syncfusion.Blazor.Popups

<SfDialog IsModal="true" Header="Confirm Delete" Width="350px">
    <DialogTemplates>
        <Content>
            <p>Are you sure you want to delete this item?</p>
            <p>This action cannot be undone.</p>
        </Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="Delete" IsPrimary="true" />
        <DialogButton Content="Cancel" />
    </DialogButtons>
</SfDialog>

Key Properties:

• IsModal="true" - Creates overlay blocking page interaction
• Overlay prevents clicking outside the dialog
• Overlay click can be handled with OnOverlayModalClick event

Modeless Dialog (Non-Blocking)

A modeless dialog floats above the page without blocking interaction with the rest of the page content.

When to Use Modeless:

• Help or reference dialogs
• Floating palettes or toolbars
• Secondary information displays
• Non-critical notifications
• Chat windows or floating panels

@using Syncfusion.Blazor.Popups

<SfDialog IsModal="false" 
          Header="Helpful Tips" 
          Width="300px"
          AllowDragging="true">
    <DialogTemplates>
        <Content>
            <p>Tip 1: Use keyboard shortcuts for faster navigation</p>
            <p>Tip 2: Save your work frequently</p>
        </Content>
    </DialogTemplates>
</SfDialog>

Key Properties:

• IsModal="false" or omitted (default is false)
• User can interact with page while dialog is open
• Dialog floats above page content

Comparison

Draggable Dialogs

The AllowDragging property enables users to drag the dialog by its header to reposition it on the screen.

Basic Draggable Dialog

@using Syncfusion.Blazor.Popups

<SfDialog AllowDragging="true" Header="Draggable Dialog">
    <DialogTemplates>
        <Content>Drag the header to move this dialog around the page</Content>
    </DialogTemplates>
</SfDialog>

Draggable with Restricted Movement

@using Syncfusion.Blazor.Popups

<div id="restricted-area" style="position: relative; width: 600px; height: 400px; border: 2px solid #333;">
    <SfDialog Target="#restricted-area"
              AllowDragging="true"
              Header="Restricted Drag"
              Width="300px">
        <DialogTemplates>
            <Content>Dialog can only be dragged within the container</Content>
        </DialogTemplates>
    </SfDialog>
</div>

Tracking Drag Position

@using Syncfusion.Blazor.Popups

<SfDialog AllowDragging="true" Header="Position Tracker">
    <DialogTemplates>
        <Content>
            <p>X Position: @DialogX</p>
            <p>Y Position: @DialogY</p>
            <p>Status: @DragStatus</p>
        </Content>
    </DialogTemplates>
    <DialogEvents 
        OnDragStart="@OnDragStart"
        OnDrag="@OnDrag"
        OnDragStop="@OnDragStop" />
</SfDialog>

@code {
    private double DialogX { get; set; }
    private double DialogY { get; set; }
    private string DragStatus { get; set; } = "Idle";

    private void OnDragStart(DragStartEventArgs args)
    {
        DragStatus = "Dragging...";
    }

    private void OnDrag(DragEventArgs args)
    {
        DialogX = args.Data.OffsetX;
        DialogY = args.Data.OffsetY;
    }

    private void OnDragStop(DragStopEventArgs args)
    {
        DragStatus = "Stopped";
    }
}

Resizable Dialogs

The AllowResizing property enables users to resize the dialog by dragging its edges or corners.

Basic Resizable Dialog

@using Syncfusion.Blazor.Popups

<SfDialog EnableResize="true" Header="Resizable Dialog" Width="400px" Height="300px">
    <DialogTemplates>
        <Content>
            <p>Drag the edges or corners to resize this dialog</p>
            <p>You can make it smaller or larger as needed</p>
        </Content>
    </DialogTemplates>
</SfDialog>

Resizable with Min/Max Constraints

@using Syncfusion.Blazor.Popups

<SfDialog EnableResize="true" 
          Header="Constrained Resize" 
          Width="400px" 
          Height="300px"
          CssClass="resizable-constrained">
    <DialogTemplates>
        <Content>
            <p>This dialog cannot be smaller than 300x200 or larger than 800x600</p>
        </Content>
    </DialogTemplates>
</SfDialog>

<style>
    .resizable-constrained.e-dialog {
        min-width: 300px;
        min-height: 200px;
        max-width: 800px;
        max-height: 600px;
    }
</style>

Tracking Resize Events

@using Syncfusion.Blazor.Popups

<SfDialog EnableResize="true" Header="Resize Tracker" Width="400px">
    <DialogTemplates>
        <Content>
            <p>Resize Status: @ResizeStatus</p>
            <p>Last resized: @LastResizeTime</p>
        </Content>
    </DialogTemplates>
    <DialogEvents 
        OnResizeStart="@OnResizeStart"
        Resizing="@OnResizing"
        OnResizeStop="@OnResizeStop" />
</SfDialog>

@code {
    private string ResizeStatus { get; set; } = "Idle";
    private string LastResizeTime { get; set; } = "Never";

    private void OnResizeStart(MouseEventArgs args)
    {
        ResizeStatus = "Resizing...";
    }

    private void OnResizing(MouseEventArgs args)
    {
        // Continuous resize tracking
    }

    private void OnResizeStop(MouseEventArgs args)
    {
        ResizeStatus = "Stopped";
        LastResizeTime = DateTime.Now.ToString("HH:mm:ss");
    }
}

AllowPrerender

The AllowPrerender property controls whether dialog DOM elements are kept in the DOM when the dialog is hidden.

AllowPrerender = false (Default)

Dialog DOM elements are removed and recreated each time the dialog is shown. Saves memory but slower to show.

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

<SfButton OnClick="@ToggleDialog">Toggle Dialog</SfButton>

<SfDialog @bind-Visible="DialogVisible"
          AllowPrerender="false"
          Header="Memory Optimized">
    <DialogTemplates>
        <Content>
            <p>DOM elements are removed when dialog is hidden</p>
            <p>Saves memory but slower to show</p>
            <p>Render count: @RenderCount</p>
        </Content>
    </DialogTemplates>
</SfDialog>

@code {
    private bool DialogVisible { get; set; } = false;
    private int RenderCount { get; set; } = 0;

    private void ToggleDialog()
    {
        DialogVisible = !DialogVisible;
        RenderCount++;
    }
}

AllowPrerender = true

Dialog DOM elements remain in the DOM even when hidden. Uses more memory but faster to show.

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

<SfButton OnClick="@ToggleDialog">Toggle Dialog</SfButton>

<SfDialog @bind-Visible="DialogVisible"
          AllowPrerender="true"
          Header="Performance Optimized">
    <DialogTemplates>
        <Content>
            <p>DOM elements stay in memory when hidden</p>
            <p>Faster to show but uses more memory</p>
            <p>Toggle count: @ToggleCount</p>
        </Content>
    </DialogTemplates>
</SfDialog>

@code {
    private bool DialogVisible { get; set; } = false;
    private int ToggleCount { get; set; } = 0;

    private void ToggleDialog()
    {
        DialogVisible = !DialogVisible;
        ToggleCount++;
    }
}

Close Icon

The ShowCloseIcon property displays a close button in the dialog header.

With Close Icon

@using Syncfusion.Blazor.Popups

<SfDialog ShowCloseIcon="true" 
          @bind-Visible="DialogVisible"
          Header="Dialog with Close">
    <DialogTemplates>
        <Content>
            <p>Click the X button in the header to close this dialog</p>
        </Content>
    </DialogTemplates>
</SfDialog>

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

Without Close Icon

@using Syncfusion.Blazor.Popups

<SfDialog ShowCloseIcon="false" Header="Dialog without Close">
    <DialogTemplates>
        <Content>
            <p>No close button in header</p>
            <p>Must use button or other means to close</p>
        </Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="OK" OnClick="@CloseDialog" IsPrimary="true" />
    </DialogButtons>
</SfDialog>

Nested Dialogs

You can create dialogs that open other dialogs, creating a hierarchy.

Basic Nested Dialogs

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

<SfButton OnClick="@OpenDialog1">Open Dialog 1</SfButton>

<SfDialog @bind-Visible="Dialog1Visible" 
          Header="Parent Dialog" 
          Width="400px"
          ZIndex="1000">
    <DialogTemplates>
        <Content>
            <p>This is the parent dialog</p>
            <SfButton OnClick="@OpenDialog2">Open Dialog 2</SfButton>
        </Content>
    </DialogTemplates>
</SfDialog>

<SfDialog @bind-Visible="Dialog2Visible" 
          Header="Child Dialog" 
          Width="350px"
          ZIndex="1001">
    <DialogTemplates>
        <Content>
            <p>This is a nested child dialog</p>
            <SfButton OnClick="@OpenDialog3">Open Dialog 3</SfButton>
        </Content>
    </DialogTemplates>
</SfDialog>

<SfDialog @bind-Visible="Dialog3Visible" 
          Header="Grandchild Dialog" 
          Width="300px"
          ZIndex="1002">
    <DialogTemplates>
        <Content>This is a nested grandchild dialog</Content>
    </DialogTemplates>
</SfDialog>

@code {
    private bool Dialog1Visible { get; set; } = false;
    private bool Dialog2Visible { get; set; } = false;
    private bool Dialog3Visible { get; set; } = false;

    private void OpenDialog1() => Dialog1Visible = true;
    private void OpenDialog2() => Dialog2Visible = true;
    private void OpenDialog3() => Dialog3Visible = true;
}

Nested Dialogs with Data Passing

@using Syncfusion.Blazor.Popups

<SfDialog @bind-Visible="ParentOpen" Header="Parent" ZIndex="1000">
    <DialogTemplates>
        <Content>
            <p>Data: @SelectedData</p>
            <SfButton OnClick="@OpenChild">Open Child</SfButton>
        </Content>
    </DialogTemplates>
</SfDialog>

<SfDialog @bind-Visible="ChildOpen" Header="Child" ZIndex="1001">
    <DialogTemplates>
        <Content>
            <input @bind="ChildData" placeholder="Enter data" />
            <SfButton OnClick="@PassDataToParent">Pass to Parent</SfButton>
        </Content>
    </DialogTemplates>
</SfDialog>

@code {
    private bool ParentOpen { get; set; } = true;
    private bool ChildOpen { get; set; } = false;
    private string SelectedData { get; set; } = "";
    private string ChildData { get; set; } = "";

    private void OpenChild() => ChildOpen = true;

    private void PassDataToParent()
    {
        SelectedData = ChildData;
        ChildOpen = false;
    }
}

Animations

The Dialog component supports rich animations when opening and closing through the AnimationSettings property.

DialogAnimationSettings Class

Configure dialog animations using the DialogAnimationSettings class:

DialogEffect Enum Values

Basic Animation Configuration

@using Syncfusion.Blazor.Popups

<SfDialog Header="Animated Dialog"
          AnimationSettings="@AnimSettings">
    <DialogTemplates>
        <Content>Dialog with custom animation</Content>
    </DialogTemplates>
</SfDialog>

@code {
    private DialogAnimationSettings AnimSettings = new DialogAnimationSettings
    {
        Effect = DialogEffect.Fade,
        Duration = 300,
        Delay = 0
    };
}

All Animation Effects Examples

@using Syncfusion.Blazor.Popups

<!-- Fade Effect (Default) -->
<SfDialog Header="Fade Animation" 
          AnimationSettings="@new DialogAnimationSettings { Effect = DialogEffect.Fade, Duration = 400 }">
    <DialogTemplates>
        <Content>Smooth fade in/out effect</Content>
    </DialogTemplates>
</SfDialog>

<!-- FadeZoom Effect -->
<SfDialog Header="FadeZoom Animation" 
          AnimationSettings="@new DialogAnimationSettings { Effect = DialogEffect.FadeZoom, Duration = 400 }">
    <DialogTemplates>
        <Content>Combined fade and zoom effect</Content>
    </DialogTemplates>
</SfDialog>

<!-- Zoom Effect -->
<SfDialog Header="Zoom Animation" 
          AnimationSettings="@new DialogAnimationSettings { Effect = DialogEffect.Zoom, Duration = 300 }">
    <DialogTemplates>
        <Content>Scale-based zoom effect</Content>
    </DialogTemplates>
</SfDialog>

<!-- Slide Effects -->
<SfDialog Header="Slide Left" 
          AnimationSettings="@new DialogAnimationSettings { Effect = DialogEffect.SlideLeft, Duration = 350 }">
    <DialogTemplates>
        <Content>Slides in from the left side</Content>
    </DialogTemplates>
</SfDialog>

<SfDialog Header="Slide Right" 
          AnimationSettings="@new DialogAnimationSettings { Effect = DialogEffect.SlideRight, Duration = 350 }">
    <DialogTemplates>
        <Content>Slides in from the right side</Content>
    </DialogTemplates>
</SfDialog>

<SfDialog Header="Slide Top" 
          AnimationSettings="@new DialogAnimationSettings { Effect = DialogEffect.SlideTop, Duration = 350 }">
    <DialogTemplates>
        <Content>Slides down from the top</Content>
    </DialogTemplates>
</SfDialog>

<SfDialog Header="Slide Bottom" 
          AnimationSettings="@new DialogAnimationSettings { Effect = DialogEffect.SlideBottom, Duration = 350 }">
    <DialogTemplates>
        <Content>Slides up from the bottom</Content>
    </DialogTemplates>
</SfDialog>

<!-- Flip Effects - Basic Directional -->
<SfDialog Header="Flip Left Down" 
          AnimationSettings="@new DialogAnimationSettings { Effect = DialogEffect.FlipLeftDown, Duration = 500 }">
    <DialogTemplates>
        <Content>Flip animation from left to down</Content>
    </DialogTemplates>
</SfDialog>

<SfDialog Header="Flip Left Up" 
          AnimationSettings="@new DialogAnimationSettings { Effect = DialogEffect.FlipLeftUp, Duration = 500 }">
    <DialogTemplates>
        <Content>Flip animation from left to up</Content>
    </DialogTemplates>
</SfDialog>

<SfDialog Header="Flip Right Down" 
          AnimationSettings="@new DialogAnimationSettings { Effect = DialogEffect.FlipRightDown, Duration = 500 }">
    <DialogTemplates>
        <Content>Flip animation from right to down</Content>
    </DialogTemplates>
</SfDialog>

<SfDialog Header="Flip Right Up" 
          AnimationSettings="@new DialogAnimationSettings { Effect = DialogEffect.FlipRightUp, Duration = 500 }">
    <DialogTemplates>
        <Content>Flip animation from right to up</Content>
    </DialogTemplates>
</SfDialog>

<!-- Flip Effects - Axis Based -->
<SfDialog Header="Flip X Down" 
          AnimationSettings="@new DialogAnimationSettings { Effect = DialogEffect.FlipXDown, Duration = 500 }">
    <DialogTemplates>
        <Content>Horizontal flip with downward motion</Content>
    </DialogTemplates>
</SfDialog>

<SfDialog Header="Flip X Up" 
          AnimationSettings="@new DialogAnimationSettings { Effect = DialogEffect.FlipXUp, Duration = 500 }">
    <DialogTemplates>
        <Content>Horizontal flip with upward motion</Content>
    </DialogTemplates>
</SfDialog>

<SfDialog Header="Flip Y Left" 
          AnimationSettings="@new DialogAnimationSettings { Effect = DialogEffect.FlipYLeft, Duration = 500 }">
    <DialogTemplates>
        <Content>Vertical flip with leftward motion</Content>
    </DialogTemplates>
</SfDialog>

<SfDialog Header="Flip Y Right" 
          AnimationSettings="@new DialogAnimationSettings { Effect = DialogEffect.FlipYRight, Duration = 500 }">
    <DialogTemplates>
        <Content>Vertical flip with rightward motion</Content>
    </DialogTemplates>
</SfDialog>

<!-- No Animation -->
<SfDialog Header="Instant Display" 
          AnimationSettings="@new DialogAnimationSettings { Effect = DialogEffect.None }">
    <DialogTemplates>
        <Content>No animation - appears instantly</Content>
    </DialogTemplates>
</SfDialog>

Animation with Delay

@using Syncfusion.Blazor.Popups

<SfDialog Header="Delayed Animation"
          AnimationSettings="@DelayedAnimSettings">
    <DialogTemplates>
        <Content>This dialog animation starts after a 200ms delay</Content>
    </DialogTemplates>
</SfDialog>

@code {
    private DialogAnimationSettings DelayedAnimSettings = new DialogAnimationSettings
    {
        Effect = DialogEffect.Zoom,
        Duration = 300,
        Delay = 200 // Wait 200ms before starting animation
    };
}

Dynamic Animation Control

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.DropDowns

<div>
    <label>Select Animation Effect:</label>
    <select @onchange="@ChangeAnimationEffect">
        <option value="Fade">Fade</option>
        <option value="FadeZoom">FadeZoom</option>
        <option value="Zoom">Zoom</option>
        <option value="SlideLeft">Slide Left</option>
        <option value="SlideRight">Slide Right</option>
        <option value="SlideTop">Slide Top</option>
        <option value="SlideBottom">Slide Bottom</option>
        <option value="FlipLeftDown">Flip Left Down</option>
        <option value="FlipLeftUp">Flip Left Up</option>
        <option value="FlipRightDown">Flip Right Down</option>
        <option value="FlipRightUp">Flip Right Up</option>
        <option value="FlipXDown">Flip X Down</option>
        <option value="FlipXUp">Flip X Up</option>
        <option value="FlipYLeft">Flip Y Left</option>
        <option value="FlipYRight">Flip Y Right</option>
        <option value="None">None</option>
    </select>
    
    <label>Duration (ms):</label>
    <input type="number" @bind="AnimDuration" min="100" max="2000" step="50" />
    
    <button @onclick="@ToggleDialog">Toggle Dialog</button>
</div>

<SfDialog @bind-Visible="ShowDialog"
          Header="Dynamic Animation"
          AnimationSettings="@CurrentAnimSettings">
    <DialogTemplates>
        <Content>
            <p>Current Effect: @CurrentEffect</p>
            <p>Duration: @AnimDuration ms</p>
        </Content>
    </DialogTemplates>
</SfDialog>

@code {
    private bool ShowDialog { get; set; } = false;
    private string CurrentEffect { get; set; } = "Fade";
    private int AnimDuration { get; set; } = 400;
    
    private DialogAnimationSettings CurrentAnimSettings => new DialogAnimationSettings
    {
        Effect = Enum.Parse<DialogEffect>(CurrentEffect),
        Duration = AnimDuration,
        Delay = 0
    };
    
    private void ChangeAnimationEffect(ChangeEventArgs e)
    {
        CurrentEffect = e.Value?.ToString() ?? "Fade";
    }
    
    private void ToggleDialog() => ShowDialog = !ShowDialog;
}

Animation Best Practices

1. Performance: Keep Duration between 200-600ms for smooth user experience 2. Accessibility: Respect user's motion preferences with prefers-reduced-motion media query 3. Context: Use appropriate effects (e.g., SlideTop for notifications, Fade for modals) 4. Consistency: Use the same animation effect throughout your application 5. Testing: Test animations on slower devices to ensure acceptable performance 6. Delay Usage: Use Delay sparingly; only when you need sequential animations 7. None Effect: Use DialogEffect.None for performance-critical scenarios or accessibility

Accessibility Considerations

@using Syncfusion.Blazor.Popups

<SfDialog Header="Accessible Animation"
          AnimationSettings="@AccessibleAnimSettings">
    <DialogTemplates>
        <Content>Respects user's motion preferences</Content>
    </DialogTemplates>
</SfDialog>

@code {
    [Inject] IJSRuntime JS { get; set; }
    
    private DialogAnimationSettings AccessibleAnimSettings { get; set; }
    
    protected override async Task OnInitializedAsync()
    {
        // Check if user prefers reduced motion
        var prefersReducedMotion = await JS.InvokeAsync<bool>(
            "window.matchMedia", "(prefers-reduced-motion: reduce)").matches;
        
        AccessibleAnimSettings = new DialogAnimationSettings
        {
            Effect = prefersReducedMotion ? DialogEffect.None : DialogEffect.Fade,
            Duration = prefersReducedMotion ? 0 : 300
        };
    }
}

Best Practices

1. Modal for Critical Actions: Use modal dialogs for destructive or important operations 2. Modeless for Help: Use modeless for secondary information or floating palettes 3. Performance Tuning: Use AllowPrerender="true" for frequently toggled dialogs 4. Accessibility: Always provide a close mechanism (button or close icon) 5. Z-Index Management: Use consistent z-index values for nested dialogs 6. Clear Animation: Keep animation durations short (200-400ms) 7. Responsive Design: Test dialog behavior on different screen sizes 8. User Feedback: Provide visual feedback during drag/resize operations 9. Prevent Abuse: Limit dialog stacking to prevent overwhelming the user 10. Test Coverage: Test all edge cases (nested dialogs, rapid toggling, etc.)

Dialog Buttons

Overview

The Dialog component supports built-in buttons through the DialogButton component, providing a standardized way to add actions to your dialogs. Dialog buttons appear in the footer and automatically handle click events and styling.

When to Use DialogButtons:

• Standard action buttons (OK, Cancel, Delete, etc.)
• Simple button layouts with consistent styling
• Built-in click event handling
• Automatic styling and theming

When to Use FooterTemplate Instead:

• Custom button layouts or custom footer content
• Complex button arrangements or additional footer elements
• Non-button content in the footer (progress bars, info text, etc.)
• See references/templates.md for FooterTemplate details

Basic Dialog Buttons

Simple OK Button

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

<SfDialog Width="300px" Header="Message" @bind-Visible="DialogVisible">
    <DialogTemplates>
        <Content>Operation completed successfully!</Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="OK" 
                      IsPrimary="true"
                      OnClick="@CloseDialog" />
    </DialogButtons>
</SfDialog>

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

    private void CloseDialog()
    {
        DialogVisible = false;
    }
}

OK and Cancel Buttons

@using Syncfusion.Blazor.Popups

<SfDialog Width="350px" Header="Confirmation" @bind-Visible="DialogVisible">
    <DialogTemplates>
        <Content>Do you want to save changes?</Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="Save" 
                      IsPrimary="true"
                      OnClick="@OnSave" />
        <DialogButton Content="Cancel" 
                      OnClick="@OnCancel" />
    </DialogButtons>
</SfDialog>

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

    private void OnSave()
    {
        // Save action
        DialogVisible = false;
    }

    private void OnCancel()
    {
        DialogVisible = false;
    }
}

DialogButton Properties

Dialog Button Examples

Buttons with Icons

@using Syncfusion.Blazor.Popups

<SfDialog Width="350px" Header="File Operations" @bind-Visible="DialogVisible">
    <DialogTemplates>
        <Content>Do you want to save this file?</Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="Save" 
                      IconCss="e-icons e-save"
                      IsPrimary="true"
                      OnClick="@OnSave" />
        <DialogButton Content="Don't Save" 
                      IconCss="e-icons e-close"
                      OnClick="@OnDontSave" />
        <DialogButton Content="Cancel" 
                      IconCss="e-icons e-cancel"
                      IsFlat="true"
                      OnClick="@OnCancel" />
    </DialogButtons>
</SfDialog>

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

    private void OnSave() => DialogVisible = false;
    private void OnDontSave() => DialogVisible = false;
    private void OnCancel() => DialogVisible = false;
}

Disabled and Styled Buttons

@using Syncfusion.Blazor.Popups

<SfDialog Width="400px" Header="Delete Confirmation" @bind-Visible="DialogVisible">
    <DialogTemplates>
        <Content>This action cannot be undone. Are you sure?</Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="Delete" 
                      IsPrimary="true"
                      Disabled="@(!ConfirmDelete)"
                      OnClick="@OnDelete"
                      CssClass="delete-button" />
        <DialogButton Content="Cancel" 
                      OnClick="@OnCancel" />
    </DialogButtons>
</SfDialog>

<style>
    .delete-button {
        background-color: #d32f2f;
    }
</style>

@code {
    private bool DialogVisible { get; set; } = true;
    private bool ConfirmDelete { get; set; } = false;

    private void OnDelete()
    {
        // Delete action
        DialogVisible = false;
    }

    private void OnCancel() => DialogVisible = false;
}

Form Submit Dialog with Button Types

@using Syncfusion.Blazor.Popups

<SfDialog Width="400px" Header="User Registration" @bind-Visible="DialogVisible">
    <DialogTemplates>
        <Content>
            <form id="userForm" @onsubmit="@HandleSubmit">
                <div class="form-group">
                    <label>Name:</label>
                    <input @bind="UserName" type="text" required />
                </div>
                <div class="form-group">
                    <label>Email:</label>
                    <input @bind="UserEmail" type="email" required />
                </div>
            </form>
        </Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="Submit" 
                      Type="ButtonType.Submit"
                      IsPrimary="true"
                      OnClick="@OnSubmit" />
        <DialogButton Content="Reset" 
                      Type="ButtonType.Reset"
                      OnClick="@OnReset" />
        <DialogButton Content="Cancel"
                      Type="ButtonType.Button"
                      OnClick="@OnCancel" />
    </DialogButtons>
</SfDialog>

@code {
    private bool DialogVisible { get; set; } = true;
    private string UserName { get; set; }
    private string UserEmail { get; set; }

    private void HandleSubmit()
    {
        // Form submission logic
        Console.WriteLine($"Submitted: {UserName}, {UserEmail}");
    }

    private void OnSubmit()
    {
        // Validate and submit
        DialogVisible = false;
    }

    private void OnReset()
    {
        UserName = "";
        UserEmail = "";
    }

    private void OnCancel() => DialogVisible = false;
}

Button Click Handlers

Simple Click Handler

private void OnClickHandler()
{
    // Perform action
    DialogVisible = false;
}

Click Handler with Parameters

@using Syncfusion.Blazor.Popups

<SfDialog Width="350px" Header="Action Selection" @bind-Visible="DialogVisible">
    <DialogTemplates>
        <Content>Choose an action:</Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="Edit" 
                      OnClick="@(e => OnAction('edit'))" />
        <DialogButton Content="Delete" 
                      OnClick="@(e => OnAction('delete'))" />
        <DialogButton Content="Archive" 
                      OnClick="@(e => OnAction('archive'))" />
    </DialogButtons>
</SfDialog>

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

    private void OnAction(string action)
    {
        Console.WriteLine($"Action selected: {action}");
        DialogVisible = false;
    }
}

Async Click Handler

@using Syncfusion.Blazor.Popups

<SfDialog Width="350px" Header="Processing" @bind-Visible="DialogVisible">
    <DialogTemplates>
        <Content>@ProcessingMessage</Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="Submit" 
                      IsPrimary="true"
                      OnClick="@OnSubmitAsync" />
    </DialogButtons>
</SfDialog>

@code {
    private bool DialogVisible { get; set; } = true;
    private string ProcessingMessage { get; set; } = "Ready to submit";

    private async Task OnSubmitAsync()
    {
        ProcessingMessage = "Processing...";
        await Task.Delay(2000); // Simulate work
        ProcessingMessage = "Completed!";
        DialogVisible = false;
    }
}

Common Button Patterns

Confirmation Dialog

@using Syncfusion.Blazor.Popups

<SfDialog Width="350px" IsModal="true" Header="Confirm Action" @bind-Visible="DialogVisible">
    <DialogTemplates>
        <Content>Are you sure you want to proceed?</Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="Yes" 
                      IsPrimary="true"
                      OnClick="@OnConfirm" />
        <DialogButton Content="No" 
                      OnClick="@OnCancel" />
    </DialogButtons>
</SfDialog>

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

    private void OnConfirm()
    {
        // Proceed with action
        DialogVisible = false;
    }

    private void OnCancel()
    {
        DialogVisible = false;
    }
}

Form Dialog with Submit/Reset

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Inputs

<SfDialog Width="400px" Header="User Form" @bind-Visible="DialogVisible">
    <DialogTemplates>
        <Content>
            <div>
                <input type="text" @bind="UserName" placeholder="Enter name" />
                <input type="email" @bind="UserEmail" placeholder="Enter email" />
            </div>
        </Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="Submit" 
                      IsPrimary="true"
                      OnClick="@OnSubmit" />
        <DialogButton Content="Reset" 
                      OnClick="@OnReset" />
    </DialogButtons>
</SfDialog>

@code {
    private bool DialogVisible { get; set; } = true;
    private string UserName { get; set; }
    private string UserEmail { get; set; }

    private void OnSubmit()
    {
        // Save form data
        DialogVisible = false;
    }

    private void OnReset()
    {
        UserName = "";
        UserEmail = "";
    }
}

DialogButtons vs FooterTemplate

Choose DialogButtons for: Standard OK/Cancel dialogs, confirmations, simple actions Choose FooterTemplate for: Custom layouts, progress indicators, mixed content

See references/templates.md for FooterTemplate examples.

Accessibility

Ensure your dialog buttons are accessible:

<!-- Use IsPrimary to highlight main action -->
<DialogButton Content="Delete" IsPrimary="true" />

<!-- Use descriptive text in button labels -->
<DialogButton Content="Confirm Deletion" />
<DialogButton Content="Keep Item" />

<!-- Avoid disabled buttons for critical actions -->
<DialogButton Content="Submit" Disabled="false" />

Icon Classes

Common Syncfusion icon classes for buttons:

Best Practices

1. Use IsPrimary: Highlight the recommended action with IsPrimary="true" 2. Consistent Button Order: Place primary action on the right or left consistently 3. Descriptive Labels: Use clear, action-oriented button text 4. Disable When Invalid: Disable buttons when form data is incomplete or invalid 5. Event Handling: Always close or hide the dialog in click handlers 6. Icon + Content: Combine icons with text for better clarity 7. Keyboard Support: DialogButtons automatically support keyboard navigation (Tab, Enter)

Events in Blazor Dialog

Table of Contents

• Overview
• Lifecycle Events
• Visibility Events
• Drag Events
• Resize Events
• Modal Events
• Event Handling Examples

Overview

The Blazor Dialog component provides a comprehensive event system for handling lifecycle, visibility changes, user interactions, and configuration changes. Events are triggered at specific points during the dialog's existence and user interaction.

Event Structure:

<SfDialog>
    <DialogEvents EventName="@EventHandler" />
</SfDialog>

@code {
    private void EventHandler(EventArgs args)
    {
        // Handle event
    }
}

Lifecycle Events

Created Event

Fires when the dialog is initialized and rendered in the DOM. Use this to perform setup operations.

@using Syncfusion.Blazor.Popups

<SfDialog Header="Dialog">
    <DialogTemplates>
        <Content>Dialog has been created</Content>
    </DialogTemplates>
    <DialogEvents Created="@OnCreated" />
</SfDialog>

@code {
    private void OnCreated(object args)
    {
        Console.WriteLine("Dialog created");
        // Perform initialization tasks
    }
}

Destroyed Event

Fires when the dialog component is removed from the DOM. Use this for cleanup operations.

@using Syncfusion.Blazor.Popups

<SfDialog Header="Dialog" @bind-Visible="DialogVisible">
    <DialogTemplates>
        <Content>Dialog content</Content>
    </DialogTemplates>
    <DialogEvents Destroyed="@OnDestroyed" />
</SfDialog>

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

    private void OnDestroyed(object args)
    {
        Console.WriteLine("Dialog destroyed");
        // Cleanup resources
    }
}

Visibility Events

VisibleChanged Event

Fires when the Visible property changes. Used for two-way binding synchronization.

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

<SfButton OnClick="@ToggleDialog">Toggle Dialog</SfButton>
<p>Dialog is: @(DialogVisible ? "Visible" : "Hidden")</p>

<SfDialog @bind-Visible="DialogVisible" Header="Visibility Binding">
    <DialogTemplates>
        <Content>Dialog content</Content>
    </DialogTemplates>
    <DialogEvents VisibleChanged="@OnVisibleChanged" />
</SfDialog>

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

    private void ToggleDialog() => DialogVisible = !DialogVisible;

    private void OnVisibleChanged(bool isVisible)
    {
        Console.WriteLine($"Dialog visibility changed to: {isVisible}");
    }
}

Remarks:

• This event is automatically invoked when @bind-Visible binding changes
• Useful for tracking visibility state changes in parent component
• Works bidirectionally: property changes trigger the event and event can update the property

OnOpen Event

Fires before the dialog is opened. Use this to validate or prevent opening under certain conditions.

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

<SfButton OnClick="@OpenDialog">Open</SfButton>

<SfDialog @bind-Visible="DialogVisible" Header="Before Open">
    <DialogTemplates>
        <Content>Opening event fired before dialog displays</Content>
    </DialogTemplates>
    <DialogEvents OnOpen="@BeforeOpenHandler" />
</SfDialog>

@code {
    private bool DialogVisible { get; set; } = false;
    private bool CanOpen { get; set; } = true;

    private void OpenDialog() => DialogVisible = true;

    private void BeforeOpenHandler(BeforeOpenEventArgs args)
    {
        if (!CanOpen)
        {
            args.Cancel = true; // Prevent dialog from opening
            Console.WriteLine("Dialog opening prevented");
        }
        else
        {
            Console.WriteLine("Dialog is about to open");
        }
    }
}

Opened Event

Fires after the dialog has been fully displayed and is visible to the user.

@using Syncfusion.Blazor.Popups

<SfDialog @bind-Visible="DialogVisible" Header="After Open">
    <DialogTemplates>
        <Content>Dialog is now open</Content>
    </DialogTemplates>
    <DialogEvents Opened="@OnOpenedHandler" />
</SfDialog>

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

    private void OnOpenedHandler(OpenEventArgs args)
    {
        Console.WriteLine("Dialog opened and displayed");
        // Perform actions after dialog is visible
    }
}

OnClose Event

Fires before the dialog closes. Use this to validate or prevent closing.

@using Syncfusion.Blazor.Popups

<SfDialog @bind-Visible="DialogVisible" Header="Before Close">
    <DialogTemplates>
        <Content>Close event fires before dialog hides</Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="Close" OnClick="@CloseDialog" />
    </DialogButtons>
    <DialogEvents OnClose="@BeforeCloseHandler" />
</SfDialog>

@code {
    private bool DialogVisible { get; set; } = true;
    private bool HasUnsavedChanges { get; set; } = true;

    private void CloseDialog() => DialogVisible = false;

    private void BeforeCloseHandler(BeforeCloseEventArgs args)
    {
        if (HasUnsavedChanges)
        {
            args.Cancel = true; // Prevent closing
            Console.WriteLine("Cannot close - unsaved changes");
        }
    }
}

Closed Event

Fires after the dialog has been closed and is hidden from view.

@using Syncfusion.Blazor.Popups

<SfDialog @bind-Visible="DialogVisible" Header="After Close">
    <DialogTemplates>
        <Content>Dialog is closed</Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="Close" OnClick="@CloseDialog" />
    </DialogButtons>
    <DialogEvents Closed="@OnClosedHandler" />
</SfDialog>

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

    private void CloseDialog() => DialogVisible = false;

    private void OnClosedHandler(CloseEventArgs args)
    {
        Console.WriteLine("Dialog closed and hidden");
    }
}

Drag Events

OnDragStart Event

Fires when the user begins dragging the dialog header.

@using Syncfusion.Blazor.Popups

<SfDialog AllowDragging="true" Header="Draggable Dialog">
    <DialogTemplates>
        <Content>Drag the header to move this dialog</Content>
    </DialogTemplates>
    <DialogEvents OnDragStart="@OnDragStartHandler" />
</SfDialog>

@code {
    private void OnDragStartHandler(DragStartEventArgs args)
    {
        Console.WriteLine("Drag started");
    }
}

OnDrag Event

Fires continuously while the user is dragging the dialog.

@using Syncfusion.Blazor.Popups

<SfDialog AllowDragging="true" Header="Position Tracker">
    <DialogTemplates>
        <Content>Current Position: X = @PositionX, Y = @PositionY</Content>
    </DialogTemplates>
    <DialogEvents OnDrag="@OnDragHandler" />
</SfDialog>

@code {
    private int PositionX { get; set; } = 0;
    private int PositionY { get; set; } = 0;

    private void OnDragHandler(DragEventArgs args)
    {
        PositionX = (int)args.Data.OffsetX;
        PositionY = (int)args.Data.OffsetY;
    }
}

OnDragStop Event

Fires when the user stops dragging the dialog.

@using Syncfusion.Blazor.Popups

<SfDialog AllowDragging="true" Header="Drag Stop">
    <DialogTemplates>
        <Content>Dialog drag completed at position: @FinalPosition</Content>
    </DialogTemplates>
    <DialogEvents OnDragStop="@OnDragStopHandler" />
</SfDialog>

@code {
    private string FinalPosition { get; set; } = "Not dragged yet";

    private void OnDragStopHandler(DragStopEventArgs args)
    {
        FinalPosition = $"X: {args.Data.OffsetX}, Y: {args.Data.OffsetY}";
        Console.WriteLine($"Drag stopped at {FinalPosition}");
    }
}

Resize Events

OnResizeStart Event

Fires when the user begins resizing the dialog.

@using Syncfusion.Blazor.Popups

<SfDialog EnableResize="true" Header="Resizable Dialog">
    <DialogTemplates>
        <Content>Drag the edges to resize this dialog</Content>
    </DialogTemplates>
    <DialogEvents OnResizeStart="@OnResizeStartHandler" />
</SfDialog>

@code {
    private void OnResizeStartHandler(MouseEventArgs args)
    {
        Console.WriteLine("Resize started");
    }
}

Resizing Event

Fires continuously while the user is resizing the dialog.

@using Syncfusion.Blazor.Popups

<SfDialog EnableResize="true" Header="Size Tracker">
    <DialogTemplates>
        <Content>
            <p>Current Width: @CurrentWidth</p>
            <p>Current Height: @CurrentHeight</p>
        </Content>
    </DialogTemplates>
    <DialogEvents Resizing="@OnResizingHandler" />
</SfDialog>

@code {
    private string CurrentWidth { get; set; } = "400px";
    private string CurrentHeight { get; set; } = "300px";

    private void OnResizingHandler(MouseEventArgs args)
    {
        // Update size display (dimension tracking)
    }
}

OnResizeStop Event

Fires when the user stops resizing the dialog.

@using Syncfusion.Blazor.Popups

<SfDialog EnableResize="true" Header="Resize Complete">
    <DialogTemplates>
        <Content>Final Size: @FinalSize</Content>
    </DialogTemplates>
    <DialogEvents OnResizeStop="@OnResizeStopHandler" />
</SfDialog>

@code {
    private string FinalSize { get; set; } = "Not resized yet";

    private void OnResizeStopHandler(MouseEventArgs args)
    {
        FinalSize = "Resize operation completed";
        Console.WriteLine("Resize stopped");
    }
}

Modal Events

OnOverlayModalClick Event

Fires when the user clicks on the modal overlay (background). Only fires in modal dialogs.

@using Syncfusion.Blazor.Popups

<SfDialog IsModal="true" Header="Modal Dialog">
    <DialogTemplates>
        <Content>Click the overlay to see the event fire</Content>
    </DialogTemplates>
    <DialogEvents OnOverlayModalClick="@OnOverlayClickHandler" />
</SfDialog>

@code {
    private void OnOverlayClickHandler(OverlayModalClickEventArgs args)
    {
        Console.WriteLine("Overlay clicked");
        // Prevent default behavior or handle overlay click
    }
}

Event Handling Examples

Complete Form Submission Example

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

<SfButton OnClick="@OpenDialog">Open Form</SfButton>

<SfDialog @bind-Visible="DialogVisible" 
          Header="User Registration" 
          Width="400px"
          ShowCloseIcon="true">
    <DialogTemplates>
        <Content>
            <div>
                <input @bind="UserName" placeholder="Enter name" />
                <input @bind="UserEmail" type="email" placeholder="Enter email" />
            </div>
        </Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="Submit" IsPrimary="true" OnClick="@OnSubmit" />
        <DialogButton Content="Cancel" OnClick="@OnCancel" />
    </DialogButtons>
    <DialogEvents 
        OnOpen="@BeforeOpenHandler"
        Opened="@OnOpenedHandler"
        OnClose="@BeforeCloseHandler"
        Closed="@OnClosedHandler" />
</SfDialog>

@code {
    private bool DialogVisible { get; set; } = false;
    private string UserName { get; set; }
    private string UserEmail { get; set; }

    private void OpenDialog() => DialogVisible = true;

    private void BeforeOpenHandler(BeforeOpenEventArgs args)
    {
        Console.WriteLine("Dialog opening - performing validation");
    }

    private void OnOpenedHandler(OpenEventArgs args)
    {
        Console.WriteLine("Dialog opened - focus on first input");
    }

    private void BeforeCloseHandler(BeforeCloseEventArgs args)
    {
        if (string.IsNullOrEmpty(UserName) || string.IsNullOrEmpty(UserEmail))
        {
            args.Cancel = true;
            Console.WriteLine("Cannot close - incomplete form");
        }
    }

    private void OnClosedHandler(CloseEventArgs args)
    {
        Console.WriteLine("Dialog closed - resetting form");
        UserName = "";
        UserEmail = "";
    }

    private void OnSubmit()
    {
        Console.WriteLine($"Form submitted: {UserName}, {UserEmail}");
        DialogVisible = false;
    }

    private void OnCancel()
    {
        DialogVisible = false;
    }
}

Dialog with Activity Logging

@using Syncfusion.Blazor.Popups

<SfDialog @bind-Visible="DialogVisible" Header="Activity Log">
    <DialogTemplates>
        <Content>
            <ul>
                @foreach (var log in ActivityLogs)
                {
                    <li>@log</li>
                }
            </ul>
        </Content>
    </DialogTemplates>
    <DialogEvents 
        Created="@OnCreated"
        OnOpen="@OnOpen"
        Opened="@OnOpened"
        OnDragStart="@OnDragStart"
        OnDragStop="@OnDragStop" />
</SfDialog>

@code {
    private bool DialogVisible { get; set; } = true;
    private List<string> ActivityLogs { get; set; } = new();

    private void OnCreated(object args) => AddLog("Dialog created");
    private void OnOpen(BeforeOpenEventArgs args) => AddLog("Dialog opening");
    private void OnOpened(OpenEventArgs args) => AddLog("Dialog opened");
    private void OnDragStart(DragStartEventArgs args) => AddLog("Drag started");
    private void OnDragStop(DragStopEventArgs args) => AddLog("Drag stopped");

    private void AddLog(string message)
    {
        ActivityLogs.Add($"{DateTime.Now:HH:mm:ss} - {message}");
        StateHasChanged();
    }
}

Event Argument Classes Reference

BeforeOpenEventArgs

Provides data for the OnOpen event, allowing you to control whether the dialog opens.

Example:

private void BeforeOpenHandler(BeforeOpenEventArgs args)
{
    if (!IsUserAuthorized)
    {
        args.Cancel = true; // Prevent dialog from opening
    }
}

BeforeCloseEventArgs

Provides data for the OnClose event, allowing you to control whether the dialog closes.

Example:

private void BeforeCloseHandler(BeforeCloseEventArgs args)
{
    if (HasUnsavedChanges && args.ClosedBy == "EscapeKey")
    {
        args.Cancel = true; // Prevent closing on Escape if unsaved changes
    }
}

OpenEventArgs

Provides data for the Opened event after the dialog has fully opened.

CloseEventArgs

Provides data for the Closed event after the dialog has fully closed.

DragStartEventArgs

Provides data when dragging begins.

DragEventArgs

Provides data continuously while dragging.

Example:

private void OnDragHandler(DragEventArgs args)
{
    CurrentX = args.Data.OffsetX;
    CurrentY = args.Data.OffsetY;
    Console.WriteLine($"Position: ({CurrentX}, {CurrentY})");
}

DragStopEventArgs

Provides data when dragging stops.

OverlayModalClickEventArgs

Provides data when the modal overlay is clicked.

Example:

private void OnOverlayClickHandler(OverlayModalClickEventArgs args)
{
    if (HasUnsavedChanges)
    {
        args.Cancel = true; // Prevent closing on overlay click
        ShowWarningMessage();
    }
}

Best Practices

1. Use OnOpen to Validate: Check conditions before dialog opens 2. Use OnClose to Warn: Alert users before they close with unsaved changes 3. Clean Up in Destroyed: Release resources and subscriptions 4. Event Cancellation: Set Cancel = true in BeforeOpenEventArgs or BeforeCloseEventArgs to prevent default behavior 5. Async Operations: Use async handlers for time-consuming operations 6. Error Handling: Wrap event handlers in try-catch for error handling 7. State Management: Update component state to reflect dialog changes 8. Performance: Avoid heavy computations in frequently-firing events (like Resizing or OnDrag) 9. Check Event Source: Use ClosedBy property to determine how dialog was closed 10. Validate Drag Bounds: Monitor drag positions to keep dialog within valid boundaries