Customization of Predefined Dialogs in Blazor
23 Aug 202314 minutes to read
Customize action buttons
You can customize the predefined dialogs buttons by using below properties.
- DialogOptions.PrimaryButtonOptions - Use this property to customize OK button text and appearence.
- DialogOptions.CancelButtonOptions - Use this property to customize Cancel button text and appearence.
Use the following code snippet for alert.razor, confirm.razor and prompt.razor to customize the predefined dialog action buttons.
For alert dialog , customized the default dialog button content as Okay by using the DialogButtonOptions.Content property.
For confirm dialog, customized the default dialog buttons content as Yes and No by using the DialogButtonOptions.Content property and also customized the dialog button icons by using DialogButtonOptions.IconCss property.
For prompt dialog , customized the default dialog buttons content as Connect and Close by using DialogButtonOptions.Content property.
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Popups
@inject SfDialogService DialogService
<div>
<SfButton @onclick="@AlertBtn">Alert</SfButton>
</div>
@code {
private async Task AlertBtn()
{
await DialogService.AlertAsync("You clicked the alert button!", "Good job!", new DialogOptions()
{
PrimaryButtonOptions = new DialogButtonOptions() { Content = "Okay"}
});
}
}@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons
@inject SfDialogService DialogService
<div>
<SfButton @onclick="@ConfirmBtn">Confirm</SfButton>
</div>
<style>
.e-btn-icon.e-icons.e-check icon.e-icon-left:before {
content: '\e7ff';
}
.e-btn-icon.e-icons.e-close icon.e-icon-left:before {
content: '\e7fc';
}
</style>
@code {
private async Task ConfirmBtn()
{
bool isConfirm = await DialogService.ConfirmAsync("Are you sure you want to permanently delete these file?", "Delete File", new DialogOptions()
{
PrimaryButtonOptions = new DialogButtonOptions() {Content = "Yes", IconCss="e-icons e-check"},
CancelButtonOptions = new DialogButtonOptions() {Content = "No", IconCss="e-icons e-close"},
});
}
}@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons
@inject SfDialogService DialogService
<div>
<SfButton @onclick="@PromptBtn">Prompt</SfButton>
</div>
@code {
private async Task PromptBtn()
{
string promptText = await DialogService.PromptAsync(null, "Join Wi-Fi network", new DialogOptions()
{
PrimaryButtonOptions = new DialogButtonOptions() { Content = "Connect"},
CancelButtonOptions = new DialogButtonOptions() { Content = "Close"},
ChildContent = @<table class="Table">
<tbody>
<tr>
<td>SSID:</td>
</tr>
<tr>
<td><b>AndroidAP</b></td>
</tr>
<tr>
<td>Password:</td>
</tr>
<tr>
<td>
<span class="e-input-group">
<input type="password" id="password" name="Required" class="e-input">
</span>
</td>
</tr>
</tbody>
</table>
});
}
}Results from the code snippet
Alert
Confirm
Prompt
Show or hide dialog close button
You can show or hide close button in dialog using the DialogOptions.ShowCloseIcon property.The default value is false.
Use the following code snippet for alert.razor, confirm.razor and prompt.razor to customize the show or hide dialog close button.
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Popups
@inject SfDialogService DialogService
<div>
<SfButton @onclick="@AlertBtn">Alert</SfButton>
</div>
@code {
private async Task AlertBtn()
{
await DialogService.AlertAsync("10% of battery remaining", "Low Battery", new DialogOptions()
{
ShowCloseIcon =true,
});
}
}@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons
@inject SfDialogService DialogService
<div>
<SfButton @onclick="@ConfirmBtn">Confirm</SfButton>
</div>
@code {
private async Task ConfirmBtn()
{
bool isConfirm = await DialogService.ConfirmAsync("Are you sure you want to permanently delete these items?", "Delete Multiple Items", new DialogOptions()
{
ShowCloseIcon =true,
});
}
}@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons
@inject SfDialogService DialogService
<div>
<SfButton @onclick="@PromptBtn">Prompt</SfButton>
</div>
@code {
private async Task PromptBtn()
{
string promptText = await DialogService.PromptAsync(null, "Join Wi-Fi network", new DialogOptions()
{
ShowCloseIcon =true,
ChildContent = @<table class="Table">
<tbody>
<tr>
<td>SSID:</td>
</tr>
<tr>
<td><b>AndroidAP</b></td>
</tr>
<tr>
<td>Password:</td>
</tr>
<tr>
<td>
<span class="e-input-group">
<input type="password" id="password" name="Required" class="e-input">
</span>
</td>
</tr>
</tbody>
</table>
});
}
}Results from the code snippet
Alert
Confirm
Prompt
Customize dialog content
You can load custom content in predefined dialogs using the DialogOptions.ChildContent property.
Use the following code to customize the dialog content and render the custom TextBox component inside the prompt dialog to obtain the username from the user using the @bind-Value property.
@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Inputs
@inject SfDialogService DialogService
<div>
<SfButton @onclick="@PromptBtn">Prompt</SfButton>
</div>
<div>
<span class="status">
@DialogStatus
</span>
</div>
@code {
private string InputValue { get; set; }
private string DialogStatus { get; set; }
private async Task PromptBtn()
{
string promptText = await DialogService.PromptAsync(null, "Join Chat Group", new DialogOptions()
{
ChildContent = @<table class="Table">
<tbody>
<tr>
<td>
<label>Enter your name: </label>
</td>
<td>
<SfTextBox Type="InputType.Text" @bind-Value="InputValue"></SfTextBox>
</td>
</tr>
</tbody>
</table>
});
this.DialogStatus = $"The user's input is returned as \"{InputValue}\".";
}
}