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? Image_3200_1733883119527


5 Replies 1 reply marked as answer

YA YuvanShankar Arunagiri Syncfusion Team December 11, 2024 06:48 AM UTC

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



CN Chang Nguyen Phuong December 11, 2024 07:05 AM UTC

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.



YA YuvanShankar Arunagiri Syncfusion Team December 12, 2024 11:06 AM UTC

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


Marked as answer

CN Chang Nguyen Phuong December 13, 2024 07:31 AM UTC

Thank it work !



YA YuvanShankar Arunagiri Syncfusion Team December 13, 2024 10:33 AM UTC

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.


Loader.
Up arrow icon