Events in ASP.NET Core SpeedDial Control

14 Nov 20225 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 Control.

Clicked event

The speed dial control triggers the clicked event when an action item is clicked. You can use this event to perform the required action.

CSHTML

@using Syncfusion.EJ2.Buttons

@{
    List<SpeedDialItem> items = new List<SpeedDialItem>();
    items.Add(new SpeedDialItem
    {
        IconCss="e-icons e-cut"
    });
    items.Add(new SpeedDialItem
    {
        IconCss="e-icons e-copy"
    });
    items.Add(new SpeedDialItem
    {
        IconCss="e-icons e-paste"
    });
}

<ejs-speeddial id="speeddial" items="items" clicked="clickedEvent" openIconCss="e-icons e-edit"></ejs-speeddial>

<script>
    function clickedEvent(args) {
        //Your required action here
    }
</script>

Created

The speed dial control triggers the created event when SpeedDial control rendering is completed.

CSHTML

@using Syncfusion.EJ2.Buttons

@{
    List<SpeedDialItem> items = new List<SpeedDialItem>();
    items.Add(new SpeedDialItem
    {
        IconCss="e-icons e-cut"
    });
    items.Add(new SpeedDialItem
    {
        IconCss="e-icons e-copy"
    });
    items.Add(new SpeedDialItem
    {
        IconCss="e-icons e-paste"
    });
}

<ejs-speeddial id="speeddial" items="items" created="createdEvent" openIconCss="e-icons e-edit"></ejs-speeddial>

<script>
    function createdEvent() {
        //Your required action here
    }
</script>

Before open

The speed dial control triggers the beforeOpen event before the SpeedDial popup is opened.

CSHTML

@using Syncfusion.EJ2.Buttons

@{
    List<SpeedDialItem> items = new List<SpeedDialItem>();
    items.Add(new SpeedDialItem
    {
        IconCss="e-icons e-cut"
    });
    items.Add(new SpeedDialItem
    {
        IconCss="e-icons e-copy"
    });
    items.Add(new SpeedDialItem
    {
        IconCss="e-icons e-paste"
    });
}

<ejs-speeddial id="speeddial" beforeOpen="beforeOpenEvent" openIconCss="e-icons e-edit" items="items"></ejs-speeddial>

<script>
    function beforeOpenEvent() {
        //Your required action here
    }
</script>

On open

The speed dial control triggers the onOpen event when SpeedDial popup is opened.

CSHTML

@using Syncfusion.EJ2.Buttons

@{
    List<SpeedDialItem> items = new List<SpeedDialItem>();
    items.Add(new SpeedDialItem
    {
        IconCss="e-icons e-cut"
    });
    items.Add(new SpeedDialItem
    {
        IconCss="e-icons e-copy"
    });
    items.Add(new SpeedDialItem
    {
        IconCss="e-icons e-paste"
    });
}

<ejs-speeddial id="speeddial" onOpen="onOpenEvent" openIconCss="e-icons e-edit" items="items"></ejs-speeddial>

<script>
    function onOpenEvent() {
        //Your required action here
    }
</script>

Before close

The speed dial control triggers the beforeClose event before the SpeedDial popup is closed.

CSHTML

@using Syncfusion.EJ2.Buttons

@{
    List<SpeedDialItem> items = new List<SpeedDialItem>();
    items.Add(new SpeedDialItem
    {
        IconCss="e-icons e-cut"
    });
    items.Add(new SpeedDialItem
    {
        IconCss="e-icons e-copy"
    });
    items.Add(new SpeedDialItem
    {
        IconCss="e-icons e-paste"
    });
}

<ejs-speeddial id="speeddial" beforeClose="beforeCloseEvent" openIconCss="e-icons e-edit" items="items"></ejs-speeddial>

<script>
    function beforeCloseEvent() {
        //Your required action here
    }
</script>

On close

The speed dial control triggers the onClose event when SpeedDial popup is closed.

CSHTML

@using Syncfusion.EJ2.Buttons

@{
    List<SpeedDialItem> items = new List<SpeedDialItem>();
    items.Add(new SpeedDialItem
    {
        IconCss="e-icons e-cut"
    });
    items.Add(new SpeedDialItem
    {
        IconCss="e-icons e-copy"
    });
    items.Add(new SpeedDialItem
    {
        IconCss="e-icons e-paste"
    });
}

<ejs-speeddial id="speeddial" onClose="onCloseEvent" openIconCss="e-icons e-edit" items="items"></ejs-speeddial>

<script>
    function onCloseEvent() {
        //Your required action here
    }
</script>

Before item render

The speed dial control triggers the beforeItemRender event for each SpeedDialItem once its rendered..

CSHTML

@using Syncfusion.EJ2.Buttons

@{
    List<SpeedDialItem> items = new List<SpeedDialItem>();
    items.Add(new SpeedDialItem
    {
        IconCss="e-icons e-cut"
    });
    items.Add(new SpeedDialItem
    {
        IconCss="e-icons e-copy"
    });
    items.Add(new SpeedDialItem
    {
        IconCss="e-icons e-paste"
    });
}

<ejs-speeddial id="speeddial" beforeItemRender="itemRenderEvent" openIconCss="e-icons e-edit" items="items"></ejs-speeddial>

<script>
    function itemRenderEvent() {
        //Your required action here
    }
</script>