Class SfDialog

The Blazor Dialog is a user interface (UI) component that displays critical information, errors, warnings, and questions to users, as well as confirms decisions and collects input from the users. Based on user interactions, the dialog is classified as modal or non-modal (modeless).

Inheritance

System.Object

SfBaseComponent

SfDialog

Implements

System.IAsyncDisposable

Inherited Members

SfBaseComponent.DisposeAsync()

Namespace: Syncfusion.Blazor.Toolkit.Popups

Assembly: Syncfusion.Blazor.Toolkit.dll

Syntax

public class SfDialog : SfBaseComponent, IAsyncDisposable

Remarks

The SfDialog component provides a flexible way to display modal or modeless dialogs with customizable content, headers, footers, and buttons. It supports features like dragging, resizing, animations, and various positioning options to enhance user interaction.

Examples

A basic dialog component with header, content, and buttons.

<SfDialog ID="defaultDialog" Width="400px" Height="300px" Header="Sample Dialog" Visible="true">
    <div>
        This is a sample dialog content.
    </div>
    <DialogButtons>
        <DialogButton Content="OK" IsPrimary="true" />
        <DialogButton Content="Cancel" />
    </DialogButtons>
</SfDialog>

Constructors

SfDialog()

Declaration

public SfDialog()

Properties

AllowDragging

Gets or sets a value indicating whether the SfDialog can be dragged by the user.

Declaration

public bool AllowDragging { get; set; }

Property Value

Type	Description
System.Boolean	`true` if dragging is enabled; otherwise, `false`. The default value is `false`.

Remarks

When enabled, you can reposition the dialog by clicking and dragging its header. The dialog can only be dragged within its container element.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility" AllowDragging="true">
  <DialogTemplates>
    <Header>
        Dialog Header
      </Header>
    <Content>
        <p>
           Dialog content
          </p>
      </Content>
  </DialogTemplates>
</SfDialog>
 @code {
  private bool Visibility { get; set; } = true;
 }

AllowPrerender

Gets or sets a value indicating whether to keep the SfDialog component's DOM structure in the page when it is closed.

Declaration

public bool AllowPrerender { get; set; }

Property Value

Type	Description
System.Boolean	`true` to maintain the dialog's DOM elements when it's closed; otherwise, `false`. The default value is `false`.

Remarks

When set to false, the dialog's DOM elements are completely removed from the page when it is closed and recreated when it is opened again. When set to true, the dialog is hidden using CSS but its DOM structure remains in the page, which can improve performance when the dialog is frequently opened and closed. This property is particularly useful for optimizing rendering performance in scenarios where the dialog contains complex content or is opened and closed repeatedly.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog @bind-Visible="Visibility" AllowPrerender="true">
</SfDialog>
@code {
    private bool Visibility { get; set; } = true;
}

Closed

Gets or sets the event callback that will be invoked when the SfDialog is closed.

Declaration

public EventCallback<CloseEventArgs> Closed { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<CloseEventArgs>	An Microsoft.AspNetCore.Components.EventCallback<> that is invoked after the dialog is closed. The callback receives a CloseEventArgs argument.

Remarks

This event is triggered after the SfDialog has been completely closed and all closing animations have finished. It provides information about how the dialog was closed and allows you to perform cleanup operations or update application state. Use this event when you need to execute logic after the dialog has been fully closed.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility" Closed="OnClosedHandler">
  <DialogTemplates>
    <Content>
      <p>Dialog content</p>
    </Content>
  </DialogTemplates>
  <DialogButtons>
    <DialogButton Content="Ok" OnClick="@OnBtnClick" />
  </DialogButtons>
</SfDialog>
@code {
  private bool Visibility { get; set; } = true;
  private void OnClosedHandler(CloseEventArgs args)
  {
    // Write your code here.
  }
  private void OnBtnClick()
  {
    this.Visibility = false;
  }
}

CloseOnEscape

Gets or sets a value indicating whether the SfDialog can be closed by pressing the Escape key.

Declaration

public bool CloseOnEscape { get; set; }

Property Value

Type	Description
System.Boolean	`true` to allow closing the dialog with the Escape key; otherwise, `false`. The default value is `true`.

Remarks

If this property is set to true, pressing the Escape key will close the dialog.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility" CloseOnEscape="false">
</SfDialog>
 @code {
  private bool Visibility { get; set; } = true;
 }

Content

Gets or sets the content to be displayed in the body of the SfDialog component.

Declaration

public string Content { get; set; }

Property Value

Type	Description
System.String	A string that represents the content of the dialog. The default value is `null`.

Remarks

This property is an alternative to using Syncfusion.Blazor.Toolkit.Popups.SfDialog.ChildContent or DialogTemplates for defining the dialog's content. If both are set, templates take precedence.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility" Content="@DialogContent">
</SfDialog>
 @code {
  private bool Visibility { get; set; } = true;
  private string DialogContent { get; set; } = "<p> Dialog content </p>";
 }

Created

Gets or sets the event callback that will be invoked when the SfDialog rendering is completed.

Declaration

public EventCallback<object> Created { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>	An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when the dialog component has been created and rendered. The callback receives an `object` argument.

Remarks

This event is triggered once the SfDialog component has been fully created and rendered in the DOM. It provides an opportunity to perform initialization tasks, set up additional event handlers, or configure the dialog after it has been created. This event occurs during the component lifecycle, typically after the first render.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility" Created="OnCreatedHandler">
  <DialogTemplates>
    <Content>
      <p>Dialog content</p>
    </Content>
  </DialogTemplates>
</SfDialog>
@code {
  private bool Visibility { get; set; } = true;
  private void OnCreatedHandler(object args)
  {
    // Write your initialization code here.
  }
}

CssClass

Gets or sets one or more custom CSS classes to be applied to the root element of the SfDialog component.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	A string representing the CSS classes. Multiple classes can be separated by a space. The default value is `String.Empty`.

Remarks

This property allows for custom styling of the dialog component.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility" CssClass="custom-class">
  <DialogTemplates>
    <Content>
        <p>
           Dialog content
          </p>
      </Content>
  </DialogTemplates>
</SfDialog>
<style>
.custom-class .e-dlg-content{
   background-color: #e0f6ff;
 }
</style>
 @code {
  private bool Visibility { get; set; } = true;
 }

Destroyed

Gets or sets the event callback that will be invoked when the SfDialog disposing is completed.

Declaration

public EventCallback<object> Destroyed { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>	An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when the dialog component is being destroyed. The callback receives an `object` argument.

Remarks

This event is triggered when the SfDialog component is being disposed and removed from the DOM. It provides an opportunity to perform cleanup operations, remove event handlers, or free resources before the component is destroyed. This event occurs during the component disposal process, typically when the component is being unmounted.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility" Destroyed="OnDestroyedHandler">
  <DialogTemplates>
    <Content>
      <p>Dialog content</p>
    </Content>
  </DialogTemplates>
</SfDialog>
@code {
  private bool Visibility { get; set; } = true;
  private void OnDestroyedHandler(object args)
  {
    // Write your cleanup code here.
  }
}

EnablePersistence

Gets or sets a value indicating whether to persist the component's state between page reloads. When set to true, the dialog's position, Width, and Height are persisted.

Declaration

public bool EnablePersistence { get; set; }

Property Value

Type	Description
System.Boolean	`true` if the component's state persistence is enabled; otherwise, `false`. The default value is `false`.

Remarks

The component's position, Width, and Height properties will be stored in the browser's local storage to persist its state when the page reloads.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog @bind-Visible="Visibility" EnablePersistence="true" ID="dialog_persist">
</SfDialog>
@code {
    private bool Visibility { get; set; } = true;
}

EnableResize

Gets or sets a value indicating whether the SfDialog can be resized by the user.

Declaration

public bool EnableResize { get; set; }

Property Value

Type	Description
System.Boolean	`true` if the dialog can be resized; otherwise, `false`. The default value is `false`.

Remarks

When enabled, a resize grip is created that allows the user to resize the dialog by dragging. During resizing, the dialog's dimensions cannot be smaller than the value specified by the MinHeight property. The directions in which the dialog can be resized are specified by the ResizeHandles property.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility" EnableResize="true">
  <DialogTemplates>
    <Content>
        <p>
           Dialog content
          </p>
      </Content>
  </DialogTemplates>
</SfDialog>
 @code {
  private bool Visibility { get; set; } = true;
 }

FooterTemplate

Gets or sets the template for rendering the footer of the SfDialog component.

Declaration

public string FooterTemplate { get; set; }

Property Value

Type	Description
System.String	A string that defines the HTML content for the dialog's footer. The default value is `null`.

Remarks

This property is optional and is typically used to add custom buttons or other content to the footer. If a FooterTemplate is specified, the default action buttons defined via the Syncfusion.Blazor.Toolkit.Buttons property will be ignored. For more complex content, consider using the DialogTemplates.Footer render fragment.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility" FooterTemplate="@FoooterTemplate">
  <DialogTemplates>
    <Content>
        <p>
           Dialog content
          </p>
      </Content>
  </DialogTemplates>
</SfDialog>
 @code {
  private bool Visibility { get; set; } = true;
  private string FoooterTemplate { get; set; } = "<p>Footer content</p>";
 }

Header

Gets or sets the content for the header/title of the SfDialog component.

Declaration

public string Header { get; set; }

Property Value

Type	Description
System.String	A string that specifies the title of the dialog. The default value is `null`.

Remarks

This property defines the text or HTML content that will be displayed in the dialog's header area. If not set, the header will not be displayed. For more complex header content, consider using the DialogTemplates.Header render fragment.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility" Header="@HeaderTemplate">
  <DialogTemplates>
    <Content>
        <p>
           Dialog content
          </p>
      </Content>
  </DialogTemplates>
</SfDialog>
 @code {
  private bool Visibility { get; set; } = true;
  private string HeaderTemplate { get; set; } = "<p>Header content</p>";
 }

Height

Gets or sets the height of the SfDialog component.

Declaration

public string Height { get; set; }

Property Value

Type	Description
System.String	A string representing the height in pixels, percentage, or other CSS units. A numeric value is treated as pixels. The default value is `"auto"`.

Remarks

This property controls the vertical size of the dialog. When set to "auto", the height is automatically determined by the dialog's content. You can specify values in various CSS units such as pixels (px), percentage (%), or other supported units.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility"  Height="150px">
  <DialogTemplates>
    <Content>
        <p>
           Dialog content
          </p>
      </Content>
  </DialogTemplates>
</SfDialog>
 @code {
  private bool Visibility { get; set; } = true;
 }

HtmlAttributes

Gets or sets a collection of additional HTML attributes to be applied to the root element of the SfDialog.

Declaration

public Dictionary<string, object> HtmlAttributes { get; set; }

Property Value

Type	Description
System.Collections.Generic.Dictionary<System.String, System.Object>	A System.Collections.Generic.Dictionary<, > where the key is the attribute name and the value is the attribute value. The default is `null`.

Remarks

This property allows you to add custom attributes like id, title, or aria- attributes to the dialog element.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog @bind-Visible="Visibility" title="Dialog">
</SfDialog>
@code {
    private bool Visibility { get; set; } = true;
}

ID

Gets or sets the id attribute for the root element of the SfDialog component.

Declaration

public string ID { get; set; }

Property Value

Type	Description
System.String	A string that serves as a unique identifier for the dialog. The default value is `null`.

Remarks

Providing a unique ID can be useful for targeting the dialog element with CSS or JavaScript.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog @bind-Visible="Visibility" ID="dialog_default">
</SfDialog>
@code {
    private bool Visibility { get; set; } = true;
}

IsModal

Gets or sets a value indicating whether the SfDialog is displayed as a modal dialog.

Declaration

public bool IsModal { get; set; }

Property Value

Type	Description
System.Boolean	`true` to display as a modal dialog; otherwise, `false`. The default value is `false`.

Remarks

A modal dialog creates an overlay that blocks interaction with the rest of the application until the dialog is closed. A modeless dialog (when IsModal is false) allows the user to continue interacting with the parent application while the dialog remains open.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog @bind-Visible="Visibility" IsModal="true">
</SfDialog>
@code {
    private bool Visibility { get; set; } = true;
}

MinHeight

Gets or sets the minimum height of the SfDialog component.

Declaration

public string MinHeight { get; set; }

Property Value

Type	Description
System.String	A string representing the minimum height in pixels, percentage, or other CSS units. A numeric value is treated as pixels. The default value is `String.Empty`.

Remarks

This property ensures that the dialog's height, whether set directly or through user resizing, does not fall below the specified minimum value. When the user attempts to resize the dialog below this threshold, the dialog size will be constrained to the MinHeight setting. This is particularly useful when EnableResize is set to true.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility" MinHeight="150px">
  <DialogTemplates>
    <Content>
        <p>
           Dialog content
          </p>
      </Content>
  </DialogTemplates>
</SfDialog>
 @code {
  private bool Visibility { get; set; } = true;
 }

OnClose

Gets or sets the event callback that will be invoked before the SfDialog is closed.

Declaration

public EventCallback<BeforeCloseEventArgs> OnClose { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<BeforeCloseEventArgs>	An Microsoft.AspNetCore.Components.EventCallback<> that is invoked before the dialog is closed. The callback receives a BeforeCloseEventArgs argument.

Remarks

This event is triggered before the SfDialog begins its closing process and animations. It provides an opportunity to prevent the dialog from closing by setting the Cancel property of the event arguments to true. You can use this event to validate user input, show confirmation messages, or perform other pre-closing operations.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility" OnClose="OnCloseHandler">
  <DialogTemplates>
    <Content>
      <p>Dialog content</p>
    </Content>
  </DialogTemplates>
  <DialogButtons>
    <DialogButton Content="Ok" OnClick="@OnBtnClick" />
  </DialogButtons>
</SfDialog>
@code {
  private bool Visibility { get; set; } = true;
  private void OnCloseHandler(BeforeCloseEventArgs args)
  {
    // Write your code here.
  }
  private void OnBtnClick()
  {
    this.Visibility = false;
  }
}

OnDrag

Gets or sets the event callback that will be invoked when the SfDialog is being dragged.

Declaration

public EventCallback<DragEventArgs> OnDrag { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<DragEventArgs>	An Microsoft.AspNetCore.Components.EventCallback<> that is invoked during the drag operation of the dialog. The callback receives a DragEventArgs argument.

Remarks

This event is triggered continuously while the SfDialog is being dragged by the user. It provides real-time information about the drag operation, including the current position and movement details. You can use this event to implement custom drag behaviors, update UI elements, or track the dialog's position during dragging. Note that dragging must be enabled on the dialog for this event to be triggered.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility" AllowDragging="true" OnDrag="OnDragHandler">
  <DialogTemplates>
    <Content>
      <p>Dialog content</p>
    </Content>
  </DialogTemplates>
</SfDialog>
@code {
  private bool Visibility { get; set; } = true;
  private void OnDragHandler(DragEventArgs args)
  {
    // Write your code here.
  }
}

OnDragStart

Gets or sets the event callback that will be invoked when the drag operation of the SfDialog is initiated.

Declaration

public EventCallback<DragStartEventArgs> OnDragStart { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<DragStartEventArgs>	An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when the drag operation begins. The callback receives a DragStartEventArgs argument.

Remarks

This event is triggered when the user begins dragging the SfDialog by clicking and holding the dialog header or designated drag area. It provides information about the initial drag state and allows you to perform setup operations before the drag begins. You can use this event to initialize drag-related variables, show visual indicators, or cancel the drag operation if needed. Note that dragging must be enabled on the dialog for this event to be triggered.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility" AllowDragging="true" OnDragStart="OnDragStartHandler">
  <DialogTemplates>
    <Content>
      <p>Dialog content</p>
    </Content>
  </DialogTemplates>
</SfDialog>
@code {
  private bool Visibility { get; set; } = true;
  private void OnDragStartHandler(DragStartEventArgs args)
  {
    // Write your code here.
  }
}

OnDragStop

Gets or sets the event callback that will be invoked when the drag operation of the SfDialog is stopped.

Declaration

public EventCallback<DragStopEventArgs> OnDragStop { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<DragStopEventArgs>	An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when the drag operation ends. The callback receives a DragStopEventArgs argument.

Remarks

This event is triggered when the user stops dragging the SfDialog by releasing the mouse button or touch. It provides information about the final position and state of the dialog after the drag operation is complete. You can use this event to perform cleanup operations, save the dialog position, or update related UI elements after dragging ends. Note that dragging must be enabled on the dialog for this event to be triggered.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility" AllowDragging="true" OnDragStop="OnDragStopHandler">
  <DialogTemplates>
    <Content>
      <p>Dialog content</p>
    </Content>
  </DialogTemplates>
</SfDialog>
@code {
  private bool Visibility { get; set; } = true;
  private void OnDragStopHandler(DragStopEventArgs args)
  {
    // Write your code here.
  }
}

OnOpen

Gets or sets the event callback that will be invoked before the SfDialog is opened.

Declaration

public EventCallback<BeforeOpenEventArgs> OnOpen { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<BeforeOpenEventArgs>	An Microsoft.AspNetCore.Components.EventCallback<> that is invoked before the dialog is opened. The callback receives a BeforeOpenEventArgs argument.

Remarks

This event is triggered before the SfDialog begins its opening process and animations. It provides an opportunity to prevent the dialog from opening by setting the Cancel property of the event arguments to true. You can use this event to validate conditions, prepare data, or perform other pre-opening operations before the dialog becomes visible.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility" OnOpen="OnOpenHandler">
  <DialogTemplates>
    <Content>
      <p>Dialog content</p>
    </Content>
  </DialogTemplates>
</SfDialog>
@code {
  private bool Visibility { get; set; } = true;
  private void OnOpenHandler(BeforeOpenEventArgs args)
  {
    // Write your code here.
  }
}

OnOverlayModalClick

Gets or sets the event callback that will be invoked when the SfDialog modal overlay is clicked.

Declaration

public EventCallback<OverlayModalClickEventArgs> OnOverlayModalClick { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<OverlayModalClickEventArgs>	An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when the modal overlay is clicked. The callback receives an OverlayModalClickEventArgs argument.

Remarks

This event is triggered when the user clicks on the modal overlay (backdrop) of the SfDialog when it is displayed in modal mode. It provides an opportunity to respond to overlay clicks, which commonly involves closing the dialog or showing confirmation messages. This event is only applicable when the dialog is configured as a modal dialog using the IsModal property. You can prevent the default overlay click behavior by handling this event appropriately.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility" IsModal="true" OnOverlayModalClick="OnOverlayModalClickHandler">
  <DialogTemplates>
    <Content>
      <p>Dialog content</p>
    </Content>
  </DialogTemplates>
</SfDialog>
@code {
  private bool Visibility { get; set; } = true;
  private void OnOverlayModalClickHandler(OverlayModalClickEventArgs args)
  {
    // Write your code here.
  }
}

OnResizeStart

Gets or sets the event callback that will be invoked when the resize operation of the SfDialog is initiated.

Declaration

public EventCallback<MouseEventArgs> OnResizeStart { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<Microsoft.AspNetCore.Components.Web.MouseEventArgs>	An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when the resize operation begins. The callback receives a Microsoft.AspNetCore.Components.Web.MouseEventArgs argument.

Remarks

This event is triggered when the user begins resizing the SfDialog by clicking and dragging the resize handles. It provides information about the mouse event that initiated the resize operation. You can use this event to perform setup operations, show visual indicators, or initialize resize-related variables before the resize begins. Note that resizing must be enabled on the dialog for this event to be triggered.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility" EnableResize="true" OnResizeStart="OnResizeStartHandler">
  <DialogTemplates>
    <Content>
      <p>Dialog content</p>
    </Content>
  </DialogTemplates>
</SfDialog>
@code {
  private bool Visibility { get; set; } = true;
  private void OnResizeStartHandler(MouseEventArgs args)
  {
    // Write your code here.
  }
}

OnResizeStop

Gets or sets the event callback that will be invoked when the resize operation of the SfDialog is stopped.

Declaration

public EventCallback<MouseEventArgs> OnResizeStop { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<Microsoft.AspNetCore.Components.Web.MouseEventArgs>	An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when the resize operation ends. The callback receives a Microsoft.AspNetCore.Components.Web.MouseEventArgs argument.

Remarks

This event is triggered when the user stops resizing the SfDialog by releasing the mouse button after dragging a resize handle. It provides information about the final mouse event and allows you to perform cleanup operations or save the dialog's new size. You can use this event to update related UI elements, persist size settings, or trigger other actions after the resize is complete. Note that resizing must be enabled on the dialog for this event to be triggered.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility" EnableResize="true" OnResizeStop="OnResizeStopHandler">
  <DialogTemplates>
    <Content>
      <p>Dialog content</p>
    </Content>
  </DialogTemplates>
</SfDialog>
@code {
  private bool Visibility { get; set; } = true;
  private void OnResizeStopHandler(MouseEventArgs args)
  {
    // Write your code here.
  }
}

Opened

Gets or sets the event callback that will be invoked when the SfDialog is opened.

Declaration

public EventCallback<OpenEventArgs> Opened { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<OpenEventArgs>	An Microsoft.AspNetCore.Components.EventCallback<> that is invoked after the dialog is opened. The callback receives an OpenEventArgs argument.

Remarks

This event is triggered after the SfDialog has been completely opened and all opening animations have finished. It provides confirmation that the dialog is now fully visible and interactive to the user. You can use this event to perform post-opening operations such as setting focus, initializing content, or updating application state.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility" Opened="OnOpenedHandler">
  <DialogTemplates>
    <Content>
      <p>Dialog content</p>
    </Content>
  </DialogTemplates>
</SfDialog>
@code {
  private bool Visibility { get; set; } = true;
  private void OnOpenedHandler(OpenEventArgs args)
  {
    // Write your code here.
  }
}

ResizeHandles

Gets or sets the directions in which the SfDialog can be resized.

Declaration

public ResizeDirection[] ResizeHandles { get; set; }

Property Value

Type	Description
ResizeDirection[]	An array of ResizeDirection enum values that specify the available resize handles. The default value is an array containing only SouthEast.

Remarks

This property only has an effect if EnableResize is set to true.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility" ResizeHandles="ResizeHandles" EnableResize="true">
  <DialogTemplates>
    <Content>
        <p>
           Dialog content
          </p>
      </Content>
  </DialogTemplates>
</SfDialog>
 @code {
  private bool Visibility { get; set; } = true;
  private ResizeDirection[] ResizeHandles { get; set; }
  protected override void OnInitialized()
  {
    ResizeHandles = new ResizeDirection[] { ResizeDirection.NorthEast };
  }
 }

Resizing

Gets or sets the event callback that will be invoked when the SfDialog is being resized.

Declaration

public EventCallback<MouseEventArgs> Resizing { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<Microsoft.AspNetCore.Components.Web.MouseEventArgs>	An Microsoft.AspNetCore.Components.EventCallback<> that is invoked during the resize operation of the dialog. The callback receives a Microsoft.AspNetCore.Components.Web.MouseEventArgs argument.

Remarks

This event is triggered continuously while the SfDialog is being resized by the user dragging the resize handles. It provides real-time information about the resize operation, including mouse position and movement details. You can use this event to implement custom resize behaviors, update UI elements in real-time, or apply constraints during the resize process. Note that resizing must be enabled on the dialog for this event to be triggered.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility" EnableResize="true" Resizing="OnResizingHandler">
  <DialogTemplates>
    <Content>
      <p>Dialog content</p>
    </Content>
  </DialogTemplates>
</SfDialog>
@code {
  private bool Visibility { get; set; } = true;
  private void OnResizingHandler(MouseEventArgs args)
  {
    // Write your code here.
  }
}

ShowCloseIcon

Gets or sets a value indicating whether to display a close icon in the header of the SfDialog.

Declaration

public bool ShowCloseIcon { get; set; }

Property Value

Type	Description
System.Boolean	`true` to display the close icon; otherwise, `false`. The default value is `false`.

Remarks

When this property is set to true, a close button (typically an 'X' icon) is displayed in the dialog's header, allowing the user to close it. A header must be visible for the close icon to be displayed.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog @bind-Visible="Visibility" ShowCloseIcon="true">
  <DialogTemplates>
    <Header>
        Dialog Header
      </Header>
    <Content>
        <p>
           Dialog content
          </p>
      </Content>
  </DialogTemplates>
</SfDialog>
@code {
    private bool Visibility { get; set; } = true;
}

Target

Gets or sets the target element in which the SfDialog should be displayed.

Declaration

public string Target { get; set; }

Property Value

Type	Description
System.String	The default value is `null`, which refers to the `Document.body` element.

Remarks

You can use this property to specify the CSS selector.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<div id="target" style="width:100%; height:300px;"></div>
<SfDialog Width="500px" @bind-Visible="Visibility" Target="#target">
  <DialogTemplates>
    <Content>
        <p>
           Dialog content
          </p>
      </Content>
  </DialogTemplates>
</SfDialog>
 @code {
  private bool Visibility { get; set; } = true;
 }

Visible

Gets or sets a value that represents whether the SfDialog component is visible.

Declaration

public bool Visible { get; set; }

Property Value

Type	Description
System.Boolean	`true` if the dialog is visible; otherwise, `false`. The default value is `true`.

Remarks

This property can be used to programmatically show or hide the dialog. When set to true, the dialog will be displayed; when set to false, the dialog will be hidden. This property supports two-way data binding using the @bind-Visible syntax.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog @bind-Visible="Visibility">
</SfDialog>
@code {
    private bool Visibility { get; set; } = true;
}

VisibleChanged

Gets or sets an event callback that is raised when the Visible property changes.

Declaration

public EventCallback<bool> VisibleChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Boolean>	An Microsoft.AspNetCore.Components.EventCallback<> of type System.Boolean that receives the new visibility state.

Remarks

This event callback is automatically invoked whenever the Visible property value changes. It is typically used for two-way data binding with the @bind-Visible syntax, allowing the parent component to be notified when the dialog's visibility state changes.

Width

Gets or sets the width of the SfDialog component.

Declaration

public string Width { get; set; }

Property Value

Type	Description
System.String	A string that specifies the width in various units (e.g., "500px", "50%"). Numeric values are treated as pixels. The default value is `"100%"`.

Remarks

This property determines the horizontal size of the dialog.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility"  Width="150px">
  <DialogTemplates>
    <Content>
        <p>
           Dialog content
          </p>
      </Content>
  </DialogTemplates>
</SfDialog>
 @code {
  private bool Visibility { get; set; } = true;
 }

ZIndex

Gets or sets the z-index of the SfDialog, which determines its stacking order relative to other elements.

Declaration

public double ZIndex { get; set; }

Property Value

Type	Description
System.Double	A numeric value representing the z-index. The default value is `1000`.

Remarks

A higher z-index value will cause the dialog to be displayed in front of elements with a lower z-index.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog @bind-Visible="Visibility" ZIndex="1500">
</SfDialog>
@code {
    private bool Visibility { get; set; } = true;
}

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

GetButton(Int32)

Returns the specific DialogButton instance at the specified index in the SfDialog component.

Declaration

public DialogButton GetButton(int index)

Parameters

Type	Name	Description
System.Int32	index	The zero-based index of the button to retrieve.

Returns

Type	Description
DialogButton	A DialogButton instance if found at the specified index; otherwise, `null`.

Remarks

This method allows you to access individual dialog buttons by their index position. The index is zero-based, meaning the first button has an index of 0. If the index is out of range or no buttons are configured, the method returns null.

Examples

// Get the first button from the dialog
DialogButton firstButton = dialog.GetButton(0);
if (firstButton is not null)
{
    // Use the button instance
    Console.WriteLine($"Button text: {firstButton.Content}");
}

Exceptions

Type	Condition
System.ArgumentOutOfRangeException	Thrown when the index is negative or exceeds the button collection bounds.

GetButtonItems()

Returns the complete collection of DialogButton instances configured for the SfDialog component.

Declaration

public List<DialogButton> GetButtonItems()

Returns

Type	Description
System.Collections.Generic.List<DialogButton>	A System.Collections.Generic.List<> of DialogButton instances, or `null` if no buttons are configured.

Remarks

This method provides access to all dialog buttons that have been configured for the dialog component. The returned collection includes all buttons in their original order as they appear in the dialog. If no buttons are configured, the method returns null.

Examples

// Get all buttons from the dialog
List<DialogButton> allButtons = dialog.GetButtonItems();
if (allButtons is not null)
{
    foreach (var button in allButtons)
    {
        Console.WriteLine($"Button: {button.Content}");
    }
}

GetDimensionAsync()

Gets the current dimensions (height and width) of the SfDialog component.

Declaration

public Task<DialogDimension> GetDimensionAsync()

Returns

Type	Description
System.Threading.Tasks.Task<DialogDimension>	A System.Threading.Tasks.Task<> that returns a DialogDimension object containing the current height and width of the dialog.

Remarks

This method retrieves the actual rendered dimensions of the dialog component from the DOM. The returned DialogDimension object contains both the height and width values as they appear in the browser. This is useful for programmatically determining the dialog's current size, especially when using responsive or dynamic sizing.

Examples

// Get current dialog dimensions
DialogDimension dimensions = await dialog.GetDimensionAsync();
Console.WriteLine($"Width: {dimensions.Width}, Height: {dimensions.Height}");

HideAsync()

Closes the SfDialog component if it is currently visible.

Declaration

public Task HideAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous hide operation.

Remarks

This method programmatically closes the dialog if it is currently in a visible state. If the dialog is already hidden, calling this method has no effect. The method executes asynchronously and completes when the dialog is fully closed.

Examples

// Hide the dialog programmatically
await dialog.HideAsync();

HideAsync(KeyboardEventArgs)

Closes the SfDialog component if it is currently visible, triggered by a keyboard event.

Declaration

public Task HideAsync(KeyboardEventArgs args)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Web.KeyboardEventArgs	args	The Microsoft.AspNetCore.Components.Web.KeyboardEventArgs containing details about the keyboard interaction that triggered the close operation.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous hide operation.

Remarks

This overload is typically used when the dialog needs to be closed in response to a keyboard event, such as pressing the Escape key. The keyboard event arguments provide context about the specific key interaction that triggered the close operation. If the dialog is already hidden, calling this method has no effect.

Examples

// Hide the dialog in response to a keyboard event
private async Task OnKeyDown(KeyboardEventArgs e)
{
    if (e.Key == "Escape")
    {
        await dialog.HideAsync(e);
    }
}

HideAsync(MouseEventArgs)

Closes the SfDialog component if it is currently visible, triggered by a mouse event.

Declaration

public Task HideAsync(MouseEventArgs args)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Web.MouseEventArgs	args	The Microsoft.AspNetCore.Components.Web.MouseEventArgs containing details about the mouse interaction that triggered the close operation.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous hide operation.

Remarks

This overload is typically used when the dialog needs to be closed in response to a mouse event, such as clicking outside the dialog or on a close button. The mouse event arguments provide context about the specific mouse interaction that triggered the close operation. If the dialog is already hidden, calling this method has no effect.

Examples

// Hide the dialog in response to a mouse click event
private async Task OnCloseButtonClick(MouseEventArgs e)
{
    await dialog.HideAsync(e);
}

HideAsync(String)

Closes the SfDialog component if it is currently visible, with optional interaction context.

Declaration

public Task HideAsync(string args = "")

Parameters

Type	Name	Description
System.String	args	Optional string parameter that specifies the interaction type or context for closing the dialog.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous hide operation.

Remarks

This overload allows you to specify additional context about how the dialog is being closed. The args parameter can be used to pass information about the user interaction that triggered the close operation. If the dialog is already hidden, calling this method has no effect.

Examples

// Hide the dialog with interaction context
await dialog.HideAsync("cancel");

RefreshPositionAsync()

Refreshes and recalculates the position of the SfDialog component after dynamic size changes.

Declaration

public Task RefreshPositionAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous position refresh operation.

Remarks

This method is useful when the dialog's dimensions (height and width) are changed programmatically or dynamically at runtime. After calling this method, the dialog will recalculate its position to ensure it remains properly centered or positioned according to its configuration. This is particularly important for maintaining proper dialog positioning when content changes affect the dialog's size.

Examples

// Refresh dialog position after dynamic content change
dialog.Width = "800px";
dialog.Height = "600px";
await dialog.RefreshPositionAsync();

ShowAsync(Nullable<Boolean>)

Opens the SfDialog component if it is currently in a hidden state.

Declaration

public Task ShowAsync(Nullable<bool> isFullScreen = null)

Parameters

Type	Name	Description
System.Nullable<System.Boolean>	isFullScreen	Optional boolean value that specifies whether the dialog should open in full screen mode. If `null`, uses the default behavior. Default is `false`.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous show operation.

Remarks

This method programmatically opens the dialog if it is currently hidden. When isFullScreen is set to true, the dialog will occupy the entire viewport. If the dialog is already visible, calling this method may update its full screen state based on the parameter. The method handles both pre-render and post-render scenarios appropriately.

Examples

// Show the dialog in normal mode
await dialog.ShowAsync();

// Show the dialog in full screen mode
await dialog.ShowAsync(true);

Implements

System.IAsyncDisposable

Class SfDialog

Inheritance

Implements

Inherited Members

Namespace: Syncfusion.Blazor.Toolkit.Popups

Assembly: Syncfusion.Blazor.Toolkit.dll

Syntax

Remarks

Examples

Constructors

SfDialog()

Declaration

Properties

AllowDragging

Declaration

Property Value

Remarks

Examples

AllowPrerender

Declaration

Property Value

Remarks

Examples

See Also

Closed

Declaration

Property Value

Remarks

Examples

CloseOnEscape

Declaration

Property Value

Remarks

Examples

Content

Declaration

Property Value

Remarks

Examples

Created

Declaration

Property Value

Remarks

Examples

CssClass

Declaration

Property Value

Remarks

Examples

Destroyed

Declaration

Property Value

Remarks

Examples

EnablePersistence

Declaration

Property Value

Remarks

Examples

EnableResize

Declaration

Property Value

Remarks

Examples

FooterTemplate

Declaration

Property Value

Remarks

Examples

Header

Declaration

Property Value

Remarks

Examples

Height

Declaration

Property Value

Remarks

Examples

See Also