Events in Blazor Speed Dial

14 Aug 20265 minutes to read

This section describes the SpeedDial events that are triggered when appropriate actions are performed. The following events are available in the SpeedDial component.

Item clicked

The SpeedDial component triggers the ItemClicked event with the SpeedDialItemEventArgs argument when an action item is clicked. 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)
    {
        // Perform the required action using args.Item and args.Event.
    }
}

Created

The SpeedDial component triggers 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()
    {
        // Run initialization logic after the component is rendered.
    }
}

Opening

The SpeedDial component triggers the Opening event with SpeedDialBeforeOpenCloseEventArgs before the SpeedDial 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)
    {
        // Cancel the open action based on a condition.
        // args.Cancel = true;
    }
}

Opened

The SpeedDial component triggers the Opened event with SpeedDialOpenCloseEventArgs after the SpeedDial 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)
    {
        // Run logic that depends on the popup being visible.
    }
}

Closing

The SpeedDial component triggers the Closing event with SpeedDialBeforeOpenCloseEventArgs before the SpeedDial 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)
    {
        // Validate state, save changes, or cancel closing.
        // args.Cancel = true;
    }
}

Closed

The SpeedDial component triggers the Closed event with SpeedDialOpenCloseEventArgs after the SpeedDial 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)
    {
        // Perform cleanup or post-close actions.
    }
}

Item rendered

The SpeedDial component triggers 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)
    {
        // Customize the rendered item using args.Item.
    }
}