How to show or hide Blazor Dialog buttons dynamically in application?
The Syncfusion Blazor Dialog component provides an option to show or hide its buttons dynamically. So, user can change buttons based on their application needs and can be use single dialog for multiple purposes.
For example, the dialog displays with ‘Yes’ and ‘No’ buttons and later the buttons text can be change to ‘OK’ and ‘Cancel’.
Show or hide dialog buttons
Follow the below steps to show or hide the buttons dynamically.
- Initialize the dialog with content template
- Configure the different dialog buttons within conditional variable
- Render the button to display a dialog with different buttons
Refer to the following code example.
@page "/"
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Popups
<SfButton @onclick="ShowDialog1">Open a dialog with OK and Cancel Button</SfButton>
<SfButton @onclick="ShowDialog2">Open a dialog with Yes and No Buttons</SfButton>
<div id="target">
<SfDialog Width="250px" @ref="DlgRef" Target="#target">
<DialogTemplates>
<Header> Dialog Header </Header>
<Content> Dialog Content </Content>
</DialogTemplates>
@if (isConfirm)
{
<DialogButtons>
<DialogButton OnClick="@CloseDialog">
<DialogButtonModel Content="Yes" IsPrimary="true"></DialogButtonModel>
</DialogButton>
<DialogButton OnClick="@CloseDialog">
<DialogButtonModel Content="No"></DialogButtonModel>
</DialogButton>
</DialogButtons>
}
else
{
<DialogButtons>
<DialogButton OnClick="@CloseDialog">
<DialogButtonModel Content="OK" IsPrimary="true"></DialogButtonModel>
</DialogButton>
<DialogButton OnClick="@CloseDialog">
<DialogButtonModel Content="Cancel"></DialogButtonModel>
</DialogButton>
</DialogButtons>
}
</SfDialog>
</div>
<style>
#target {
margin-top: 70px;
min-height: 300px;
height: 100%;
}
</style>
@code {
private SfDialog DlgRef;
private bool isConfirm { get; set; } = false;
private void ShowDialog1()
{
this.isConfirm = false;
this.DlgRef.Show();
}
private void ShowDialog2()
{
this.isConfirm = true;
this.DlgRef.Show();
}
private void CloseDialog()
{
this.DlgRef.Hide();
}
}
Conclusion
I hope you enjoyed learning how to show or hide Blazor Dialog buttons dynamically in application.
You can refer to our Blazor Dialog feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Dialog example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
