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

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.GetEffectivePlatform()

SfBaseComponent.GetMainComponentPlatform()

SfBaseComponent.IsMainLicenseComponent()

SfBaseComponent.LicenseContext

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

SfBaseComponent.ValidateLicense()

Namespace: Syncfusion.Blazor.Popups

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfDialog : SfBaseComponent

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.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.Popups
<SfDialog @bind-Visible="Visibility" AllowPrerender="true">
</SfDialog>
@code {
    private bool Visibility { get; set; } = true;
}

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.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. It can include HTML markup. The default value is `null`.

Remarks

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

Examples

@using Syncfusion.Blazor.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>";
 }

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 `null`.

Remarks

This property allows for custom styling of the dialog component.

Examples

@using Syncfusion.Blazor.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;
 }

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.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.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;
 }

EnableRtl

Gets or sets a value indicating whether Right-To-Left (RTL) support is enabled for the SfDialog component.

Declaration

public bool EnableRtl { get; set; }

Property Value

Type	Description
System.Boolean	`true` to enable RTL mode; otherwise, `false`. The default value is `false`.

Remarks

When enabled, the dialog's layout and text will be adapted for right-to-left languages.

Examples

@using Syncfusion.Blazor.Popups
<SfDialog Width="500px" @bind-Visible="Visibility" EnableRtl="true">
</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.Buttons property will be ignored. For more complex content, consider using the DialogTemplates.Footer render fragment.

Examples

@using Syncfusion.Blazor.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. It can include HTML markup. 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.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.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.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.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.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 `null`.

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.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;
 }

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.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 };
  }
 }

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.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.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.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.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.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 != 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 != null)
{
    foreach (var button in allButtons)
    {
        Console.WriteLine($"Button: {button.Content}");
    }
}

GetDimension()

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

Declaration

public Task<DialogDimension> GetDimension()

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.GetDimension();
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 = null)

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");

OnAfterRenderAsync(Boolean)

This method is invoked after the component has been rendered, and it handles post-rendering logic, such as showing the dialog.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender	A `bool` that is `true` if this is the first time the component has been rendered; otherwise, `false`.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task that represents the asynchronous post-rendering operation.

Overrides

SfBaseComponent.OnAfterRenderAsync(Boolean)

Remarks

This method is responsible for handling tasks that must occur after the component's UI has been updated. It manages visibility changes and ensures that the dialog is correctly initialized and displayed on the client side, particularly in scenarios involving prerendering.

OnInitializedAsync()

This method is invoked when the component is ready to start, and it initializes the dialog's properties and state.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task that represents the asynchronous initialization process.

Overrides

SfBaseComponent.OnInitializedAsync()

Remarks

This lifecycle method is responsible for setting up the initial state of the SfDialog. It assigns a unique ID if one is not provided, configures CSS classes, and initializes various properties like AllowDragging, EnableResize, and IsModal. It also prepares the component for rendering, especially in server-side or prerendering scenarios.

OnParametersSetAsync()

This method is invoked when the component has received parameters from its parent, and it handles property updates.

Declaration

protected override Task OnParametersSetAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task that represents the asynchronous operation of setting parameters.

Remarks

This method tracks changes in component parameters and updates the dialog's state accordingly. If any properties have changed, it calls the ClientPropertyChangeHandler to apply these updates on the client side, ensuring that the dialog's appearance and behavior reflect the latest parameter values.

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);

Class SfDialog

Inheritance

Inherited Members

Namespace: Syncfusion.Blazor.Popups

Assembly: Syncfusion.Blazor.dll

Syntax

Remarks

Examples

Constructors

SfDialog()

Declaration

Properties

AllowDragging

Declaration

Property Value

Remarks

Examples

AllowPrerender

Declaration

Property Value

Remarks

Examples

See Also

CloseOnEscape

Declaration

Property Value

Remarks

Examples

Content

Declaration

Property Value

Remarks

Examples

CssClass

Declaration

Property Value

Remarks

Examples

EnablePersistence

Declaration

Property Value

Remarks

Examples

EnableResize

Declaration

Property Value

Remarks

Examples

EnableRtl

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

HtmlAttributes

Declaration

Property Value

Remarks

Examples

ID

Declaration

Property Value

Remarks

Examples

IsModal