How to off auto close on SfSpeedDial
How can I remove the option to automatically hide when clicking on SpeedDialItem. I just want to hide the SpeedDial when I press the speeddial button again. I tried opening and closing events but it's quite troublesome. Is there a way to turn off auto-close?
Hi Chang,
We have validated your reported query, and to prevent the auto close while clicking on speed dial items, set the argument cancel property as true in the Closing event of the speed dial component. Additionally, if you want to hide the speed dial component, kindly use the Visible property of the speed dial. Refer to the below code snippet and UG link.
UG link: https://blazor.syncfusion.com/documentation/speeddial/events#closing
|
@using Syncfusion.Blazor.Buttons
<SfSpeedDial Closing="ClosingEvent" OpenIconCss="e-icons e-edit" Visible="@isVisible" Opened="Opened"> <SpeedDialItems> <SpeedDialItem IconCss="e-icons e-cut" /> <SpeedDialItem IconCss="e-icons e-copy" /> <SpeedDialItem IconCss="e-icons e-paste" /> </SpeedDialItems> </SfSpeedDial>
@code { private bool isVisible = true; public void Opened() { isVisible = false; } public void ClosingEvent(SpeedDialBeforeOpenCloseEventArgs args) { args.Cancel = true; } } |
Please let us know if you need any further assistance on this.
Regards,
YuvanShankar A
I just want it to turn off when I click on the original icon when I click on OpenIconCss="e-icons e-edit" or CloseIconCss="fa-regular fa-circle-xmark"
That's how I want to turn off the displayed SpeedDialItems. It doesn't have an IsAutoHide attribute :(. Is there any way.
Hi Chang,
Based on your provided information, we understood that you need to open and close the speed dial items only on clicking the speed dial main button. Other document mouse down action or other action you need to prevent the closing action of speed dial items. To achieve your requirement, kindly refer to the below code snippet.
|
@using Syncfusion.Blazor.Buttons
<SfSpeedDial Closing="ClosingEvent" Opening="OpeningEvent" OpenIconCss="e-icons e-edit" CloseIconCss="fa-regular fa-circle-xmark" @onmouseup="onClick"> <SpeedDialItems> <SpeedDialItem IconCss="e-icons e-cut" /> <SpeedDialItem IconCss="e-icons e-copy" /> <SpeedDialItem IconCss="e-icons e-paste" /> </SpeedDialItems> </SfSpeedDial>
@code { private bool canClose = true; private async void onClick() { canClose = false; } public void OpeningEvent(SpeedDialBeforeOpenCloseEventArgs args) { canClose = true; } public void ClosingEvent(SpeedDialBeforeOpenCloseEventArgs args) { args.Cancel = canClose; } } |
If we misunderstood your query, kindly share your exact query with more details, like a step-by-step replication action or video demonstration of your expected behavior for speed dial buttons. Based on that, we will check and provide a better solution.
Regards,
YuvanShankar A
Thank it work !
You are welcome, Chang. Please get back to us if you need any further assistance on this.
If that post is helpful, please consider accepting it as the solution so that other members can locate it more quickly.
- 5 Replies
- 2 Participants
- Marked answer
-
CN Chang Nguyen Phuong
- Dec 11, 2024 02:16 AM UTC
- Dec 13, 2024 10:33 AM UTC