Events in Blazor SpeedDial Component

4 Nov 20255 minutes to read

This section describes the Speed Dial events that will be triggered when appropriate actions are performed. The following events are available in the Speed Dial Component.

Item clicked

The Speed Dial component raises the ItemClicked event with SpeedDialItemEventArgs argument when an action item is clicked. You can use this event to perform the required action.

RAZOR

@using Syncfusion.Blazor.Buttons

<SfSpeedDial OpenIconCss="e-icons e-edit" ItemClicked="ItemEventClick">
    <SpeedDialItems>
        <SpeedDialItem IconCss="e-icons e-cut"/>
        <SpeedDialItem IconCss="e-icons e-copy"/>
        <SpeedDialItem IconCss="e-icons e-paste"/>
    </SpeedDialItems>        
</SfSpeedDial>

@code{
    public void ItemEventClick(SpeedDialItemEventArgs args)
    {
        // Here, you can call your desired action.        
    }
}

Created

The Speed Dial component raises the Created event after the component has completed rendering. Use this event to run initialization logic, logging, or configuration that depends on the rendered instance.

RAZOR

@using Syncfusion.Blazor.Buttons

<SfSpeedDial Created="CreatedEvent" OpenIconCss="e-icons e-edit">
    <SpeedDialItems>
        <SpeedDialItem IconCss="e-icons e-cut"/>
        <SpeedDialItem IconCss="e-icons e-copy"/>
        <SpeedDialItem IconCss="e-icons e-paste"/>
    </SpeedDialItems>
</SfSpeedDial>

@code{
    public void CreatedEvent()
    {
        // Here, you can call your desired action.
    }
}

Opening

The Speed Dial component raises the Opening event with SpeedDialBeforeOpenCloseEventArgs before the Speed Dial popup opens. Use this event to prepare data, adjust items, or cancel opening based on conditions by setting the Cancel property in the event arguments.

RAZOR

@using Syncfusion.Blazor.Buttons

<SfSpeedDial Opening="OpeningEvent" OpenIconCss="e-icons e-edit">
    <SpeedDialItems>
        <SpeedDialItem IconCss="e-icons e-cut"/>
        <SpeedDialItem IconCss="e-icons e-copy"/>
        <SpeedDialItem IconCss="e-icons e-paste"/>
    </SpeedDialItems>
</SfSpeedDial>

@code{
    public void OpeningEvent(SpeedDialBeforeOpenCloseEventArgs args)
    {
        // Here, you can call your desired action.
    }
}

Opened

The Speed Dial component raises the Opened event with SpeedDialOpenCloseEventArgs after the Speed Dial popup is opened. Use this event to run logic that depends on the popup being visible, such as focusing elements or tracking analytics.

RAZOR

@using Syncfusion.Blazor.Buttons

<SfSpeedDial Opened="OpenedEvent" OpenIconCss="e-icons e-edit">
    <SpeedDialItems>
        <SpeedDialItem IconCss="e-icons e-cut"/>
        <SpeedDialItem IconCss="e-icons e-copy"/>
        <SpeedDialItem IconCss="e-icons e-paste"/>
    </SpeedDialItems>
</SfSpeedDial>

@code{
    public void OpenedEvent(SpeedDialOpenCloseEventArgs args)
    {
        // Here, you can call your desired action.
    }
}

Closing

The Speed Dial component raises the Closing event with SpeedDialBeforeOpenCloseEventArgs before the Speed Dial popup closes. Use this event to validate state, save changes, or cancel closing by setting the Cancel property in the event arguments.

RAZOR

@using Syncfusion.Blazor.Buttons

<SfSpeedDial Closing="ClosingEvent" OpenIconCss="e-icons e-edit">
    <SpeedDialItems>
        <SpeedDialItem IconCss="e-icons e-cut"/>
        <SpeedDialItem IconCss="e-icons e-copy"/>
        <SpeedDialItem IconCss="e-icons e-paste"/>
    </SpeedDialItems>
</SfSpeedDial>

@code{
    public void ClosingEvent(SpeedDialBeforeOpenCloseEventArgs args)
    {
        // Here, you can call your desired action.
    }
}

Closed

The Speed Dial component raises the Closed event with SpeedDialOpenCloseEventArgs after the Speed Dial popup is closed. Use this event to perform cleanup or post-close actions.

RAZOR

@using Syncfusion.Blazor.Buttons

<SfSpeedDial Closed="ClosedEvent" OpenIconCss="e-icons e-edit">
    <SpeedDialItems>
        <SpeedDialItem IconCss="e-icons e-cut"/>
        <SpeedDialItem IconCss="e-icons e-copy"/>
        <SpeedDialItem IconCss="e-icons e-paste"/>
    </SpeedDialItems>
</SfSpeedDial>

@code{
    public void ClosedEvent(SpeedDialOpenCloseEventArgs args)
    {
        // Here, you can call your desired action.
    }
}

Item rendered

The Speed Dial component raises the ItemRendered event with SpeedDialItemEventArgs for each SpeedDialItem after it is rendered. Use this event to customize item UI or attributes once the DOM is available.

RAZOR

@using Syncfusion.Blazor.Buttons

<SfSpeedDial ItemRendered="ItemRenderEvent" OpenIconCss="e-icons e-edit">
    <SpeedDialItems>
        <SpeedDialItem IconCss="e-icons e-cut"/>
        <SpeedDialItem IconCss="e-icons e-copy"/>
        <SpeedDialItem IconCss="e-icons e-paste"/>
    </SpeedDialItems>
</SfSpeedDial>

@code{
    public void ItemRenderEvent(SpeedDialItemEventArgs args)
    {
        // Here, you can call your desired action.
    }
}