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.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

Namespace: Syncfusion.Blazor.Popups

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfDialog : SfBaseComponent

Constructors

SfDialog()

Declaration

public SfDialog()

Properties

AllowDragging

Gets or sets whether the SfDialog component can be dragged by the user.

Declaration

public bool AllowDragging { get; set; }

Property Value

Type	Description
System.Boolean	`true`, if the dragging is enabled for dialog component. The default value is `false`.

Remarks

You can reposition the dialog by clicking and dragging the header. You can only drag the dialog within the container element.

AllowPrerender

Gets or sets whether the SfDialog component re-render or not when the dialog gets open.

Declaration

public bool AllowPrerender { get; set; }

Property Value

Type	Description
System.Boolean	`true`, if dialog component elements are maintained on the DOM when closing and opening it; otherwise, false.The default value is `false`.

Remarks

Disabling this property, the Dialog component DOM element will be destroyed when closing and re-rendered the dialog DOM element while opening it. Otherwise, the dialog will be shown when opening it and remain hidden while closing it when enabled.

CloseOnEscape

Gets or sets the value whether the SfDialog component can be closed on pressing the escape (ESC) key.

Declaration

public bool CloseOnEscape { get; set; }

Property Value

Type	Description
System.Boolean	`true`, if the dialog closing by pressing the escap key. The default value is `true`.

Content

Gets or sets the value that can be displayed in the content section of the SfDialog component.

Declaration

public string Content { get; set; }

Property Value

Type	Description
System.String	The content displayed in the dialog component.The default value is `string.Empty`.

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 the custom classes to customize the SfDialog component.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	If we set the css class, then the custom class is applied for dialog. The default value is `string.Empty`.

Examples

@using Syncfusion.Blazor.Popups
<SfDialog Width="500px" @bind-Visible="Visibility">
  <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 whether to persist component's state between page reloads. When set to true, the Position, Width and Height properties values are persisted

Declaration

public bool EnablePersistence { get; set; }

Property Value

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

Remarks

Component's Position, Width and Height properties will be stored in browser local storage to persist component's state when page reloads.

EnableResize

Gets or sets whether the user can resize the SfDialog component.

Declaration

public bool EnableResize { get; set; }

Property Value

Type	Description
System.Boolean	`true`, if the dialog component creates a grip to resize it in a diagonal direction. The default value is `false`.

Remarks

You can't able to resize the dialog below the value specified in the MinHeight property.

EnableRtl

Gets or sets whether the right to left direction is enabled for SfDialog component.

Declaration

public bool EnableRtl { get; set; }

Property Value

Type	Description
System.Boolean	`true`, if the right to left direction is enabled for dialog component. The default value is `false`.

FooterTemplate

Gets or sets template as string, that defines custom appearance of SfDialog footer area.

Declaration

public string FooterTemplate { get; set; }

Property Value

Type	Description
System.String	The action buttons are enabled by default in the footer. The default value is `string.Empty`.

Remarks

This is an optional property and can be used only when the footer is occupied with information or custom components. If the footer template is configured to the dialog, the DialogButtons tag will be disabled.

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 template as string, that defines custom appearance of SfDialog title area.

Declaration

public string Header { get; set; }

Property Value

Type	Description
System.String	`string.Empty`, if dialog will be displayed without the header. The default value is `string.Empty`.

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 in pixels/number/percentage. Number value is considered as pixels.

Declaration

public string Height { get; set; }

Property Value

Type	Description
System.String	If we set the height value, then the dialog will render based on specified height otherwise the default height value `auto` is set.

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

You can add the additional Html attributes such as id, title, etc., to the dialog element.

Declaration

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

Property Value

Type
System.Collections.Generic.Dictionary<System.String, System.Object>

ID

Sets id attribute for the dialog element.

Declaration

public string ID { get; set; }

Property Value

Type	Description
System.String	Accepts the string value.

IsModal

Gets or sets whether the SfDialog can be displayed as modal.

Declaration

public bool IsModal { get; set; }

Property Value

Type	Description
System.Boolean	`true`, if the modal dialog is enabled. The default value is `false`.

Remarks

Modal: It creates an overlay that prevents interaction with the parent application and the user. Modeless: It does not prevent the user from interacting with the parent application.

MinHeight

Gets or sets the min-height of the SfDialog in pixels/number/percentage. Number value is considered as pixels.

Declaration

public string MinHeight { get; set; }

Property Value

Type	Description
System.String	If we set the min-height value, then the dialog will render based on specified min-height. The default value is `string.Empty`.

Remarks

The dialog's minimum height can be adjusted using the MinHeight property. The dialog size will be limited to the MinHeight setting if the user attempts to resize it below this threshold.

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 resize handles direction in the SfDialog component that the user can resize.

Declaration

public ResizeDirection[] ResizeHandles { get; set; }

Property Value

Type	Description
ResizeDirection[]	You can set the resize direction for dialog component. The default value is `new ResizeDirection[] { ResizeDirection.SouthEast }`.

Remarks

To resize the dialog in a specific direction, enable EnableResize.

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 the value that represents whether the close icon can be displayed in the dialog's title section.

Declaration

public bool ShowCloseIcon { get; set; }

Property Value

Type	Description
System.Boolean	`true`, if the close icon in dialog component is enabled. The default value is `false`.

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 the 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 will be open at initially. The default value is `true`.

VisibleChanged

Gets or sets an event callback that is raised when the SfDialog component is visible.

Declaration

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

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<System.Boolean>

Width

Gets or sets the width of the SfDialog in pixels/number/percentage. Number value is considered as pixels.

Declaration

public string Width { get; set; }

Property Value

Type	Description
System.String	If we set the width value, then the dialog will render based on specified width otherwise the default width value `100%` is set.

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 ZIndex that determines whether the SfDialog is displayed in front of or behind another component.

Declaration

public double ZIndex { get; set; }

Property Value

Type	Description
System.Double	The dialog will display in front of other component. The default value is `1000`.

Remarks

Set the ZIndex to the dialog by obtaining all of the ZIndex elements from a page and calculating the maximum ZIndex.

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 in the SfDialog component.

Declaration

public DialogButton GetButton(int index)

Parameters

Type	Name	Description
System.Int32	index	Specifies the button index.

Returns

Type	Description
DialogButton	DialogButton.

GetButtonItems()

Returns the collection of DialogButton instances in the SfDialog component.

Declaration

public List<DialogButton> GetButtonItems()

Returns

Type	Description
System.Collections.Generic.List<DialogButton>	System.Collections.Generic.List<>.

GetDimension()

Gets the current height and width of the SfDialog component.

Declaration

public Task<DialogDimension> GetDimension()

Returns

Type	Description
System.Threading.Tasks.Task<DialogDimension>	System.Threading.Tasks.Task.

HideAsync()

The SfDialog is closed if it is visible.

Declaration

public Task HideAsync()

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task.

HideAsync(KeyboardEventArgs)

Closes the SfDialog if it is in a visible state.

Declaration

public Task HideAsync(KeyboardEventArgs args)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Web.KeyboardEventArgs	args	Specifies the keyboard arguments.

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task.

HideAsync(MouseEventArgs)

Closes the SfDialog if it is in a visible state.

Declaration

public Task HideAsync(MouseEventArgs args)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Web.MouseEventArgs	args	Specifies the mouse interaction type.

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task.

HideAsync(String)

Closes the SfDialog if it is in a visible state.

Declaration

public Task HideAsync(string args = null)

Parameters

Type	Name	Description
System.String	args	Specifies the interaction type.

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task.

OnAfterRenderAsync(Boolean)

Method invoked after each time the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender	Set to true if this is the first time OnAfterRender(Boolean) has been invoked.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

SfBaseComponent.OnAfterRenderAsync(Boolean)

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

SfBaseComponent.OnInitializedAsync()

OnParametersSetAsync()

Method invoked when the component has received parameters from its parent.

Declaration

protected override Task OnParametersSetAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

RefreshPositionAsync()

Refreshes the SfDialog position when the user changes its height and width dynamically.

Declaration

public Task RefreshPositionAsync()

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task.

ShowAsync(Nullable<Boolean>)

Opens the SfDialog if it is in a hidden state.

Declaration

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

Parameters

Type	Name	Description
System.Nullable<System.Boolean>	isFullScreen	Specifies whether the dialog will open in full screen mode or not.

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task.

Class SfDialog

Inheritance

Inherited Members

Namespace: Syncfusion.Blazor.Popups

Assembly: Syncfusion.Blazor.dll

Syntax

Constructors

SfDialog()

Declaration

Properties

AllowDragging

Declaration

Property Value

Remarks

AllowPrerender

Declaration

Property Value

Remarks

See Also

CloseOnEscape

Declaration

Property Value

Content

Declaration

Property Value

Examples

CssClass

Declaration

Property Value

Examples

EnablePersistence

Declaration

Property Value

Remarks

EnableResize

Declaration

Property Value

Remarks

EnableRtl

Declaration

Property Value

FooterTemplate

Declaration

Property Value

Remarks

Examples

Header

Declaration

Property Value

Examples

Height

Declaration

Property Value

Examples

See Also

HtmlAttributes

Declaration

Property Value

ID

Declaration

Property Value

IsModal

Declaration

Property Value

Remarks

MinHeight

Declaration

Property Value

Remarks

Examples

See Also

ResizeHandles

Declaration

Property Value

Remarks

Examples

ShowCloseIcon

Declaration

Property Value

Target