Class DialogTemplates
A component class used within the SfDialog to configure custom templates for the header, content, and footer sections of the dialog.
Inheritance
Namespace: Syncfusion.Blazor.Popups
Assembly: Syncfusion.Blazor.dll
Syntax
public class DialogTemplates : OwningComponentBaseRemarks
The DialogTemplates class provides template properties to customize the appearance and content of different areas within a dialog component. This allows developers to define custom UI elements and layouts for the dialog's header, content, and footer sections instead of using the default dialog structure.
Examples
@using Syncfusion.Blazor.Popups
<SfDialog Width="500px" @bind-Visible="Visibility">
<DialogTemplates>
<Header><h1>Dialog Header</h1></Header>
<Content>
<p>Dialog content</p>
</Content>
<FooterTemplate>
<button class="e-btn" style="background-color:#8A2BE2;" onclick="@OnBtnClick">OK</button>
</FooterTemplate>
</DialogTemplates>
</SfDialog>
@code {
private bool Visibility { get; set; } = true;
private void OnBtnClick()
{
this.Visibility = false;
}
}Constructors
DialogTemplates()
Declaration
public DialogTemplates()Properties
Content
Gets or sets the template as Microsoft.AspNetCore.Components.RenderFragment that defines the custom appearance of the dialog's content area.
Declaration
public RenderFragment Content { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.RenderFragment | A Microsoft.AspNetCore.Components.RenderFragment that specifies the custom template for the dialog content area. The default value is |
Remarks
The Content property is used to customize the main body or content area of the dialog. This template allows you to define any custom HTML elements, Blazor components, forms, or other content that should be displayed in the dialog's body section. Specify the Content template within the DialogTemplates tag directive.
Examples
@using Syncfusion.Blazor.Popups
<SfDialog Width="500px" @bind-Visible="Visibility">
<DialogTemplates>
<Content>
<p>Dialog content</p>
</Content>
</DialogTemplates>
</SfDialog>
@code {
private bool Visibility { get; set; } = true;
}FooterTemplate
Gets or sets the template as Microsoft.AspNetCore.Components.RenderFragment that defines the custom appearance of the dialog's footer area.
Declaration
public RenderFragment FooterTemplate { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.RenderFragment | A Microsoft.AspNetCore.Components.RenderFragment that specifies the custom template for the dialog footer area. The default value is |
Remarks
The FooterTemplate property is used to customize the footer area of the dialog, typically used for action buttons like OK, Cancel, Save, etc. When this property is set, it overrides the default footer buttons and allows you to define custom buttons, controls, or other content for the footer section. If not specified, the action buttons are enabled by default in the footer. Specify the FooterTemplate within the DialogTemplates tag directive.
Examples
@using Syncfusion.Blazor.Popups
<SfDialog Width="500px" @bind-Visible="Visibility">
<DialogTemplates>
<Content>
<p>Dialog content</p>
</Content>
<FooterTemplate>
<button class="e-btn" style="background-color:#8A2BE2;" onclick="@OnBtnClick">OK</button>
</FooterTemplate>
</DialogTemplates>
</SfDialog>
@code {
private bool Visibility { get; set; } = true;
private void OnBtnClick()
{
this.Visibility = false;
}
}Header
Gets or sets the template as Microsoft.AspNetCore.Components.RenderFragment that defines the custom appearance of the dialog's header area.
Declaration
public RenderFragment Header { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.RenderFragment | A Microsoft.AspNetCore.Components.RenderFragment that specifies the custom template for the dialog header area. The default value is |
Remarks
The Header property is used to customize the appearance of the dialog's title area. When this property is set, it overrides the default header content and allows you to define custom HTML elements, Blazor components, or any other content for the header section. Specify the Header template within the DialogTemplates tag directive.
Examples
@using Syncfusion.Blazor.Popups
<SfDialog Width="500px" @bind-Visible="Visibility">
<DialogTemplates>
<Header><h1>Dialog Header</h1></Header>
<Content>
<p>Dialog content</p>
</Content>
</DialogTemplates>
</SfDialog>
@code {
private bool Visibility { get; set; } = true;
}Methods
Dispose()
Releases all resources used by the DialogTemplates component.
Declaration
public virtual void Dispose()Remarks
This method implements the System.IDisposable interface to ensure proper cleanup of resources when the component is no longer needed.
It calls the protected Dispose(Boolean) method with true to indicate that both managed and unmanaged resources should be disposed.
Dispose(Boolean)
Releases the unmanaged resources used by the DialogTemplates and optionally releases the managed resources.
Declaration
protected override void Dispose(bool disposing)Parameters
| Type | Name | Description |
|---|---|---|
| System.Boolean | disposing | A System.Boolean value indicating whether the method call comes from a Dispose method ( |
Remarks
This protected method follows the standard .NET dispose pattern. When disposing is true,
it cleans up managed resources including setting the Parent reference to null to avoid memory leaks.
The method calls the base class implementation to ensure proper cleanup of inherited resources.
OnInitialized()
Method invoked when the component is ready to start, used to register templates with the parent dialog.
Declaration
protected override void OnInitialized()Remarks
This method is automatically called by the Blazor framework during component initialization. It registers the Header, Content, and FooterTemplate with the parent SfDialog component if they are defined, and triggers a refresh of the parent dialog to apply the template changes.