Events in ASP.NET MVC SpeedDial Control

14 Nov 20228 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.

@using Syncfusion.EJ2.Buttons

@Html.EJS().SpeedDial("speeddial").OpenIconCss("e-icons e-edit").Clicked("ClickedEvent").Items(ViewBag.datasource).Render()

<script>
    function ClickedEvent(args) {
        //Your required action here
    }
</script>
public ActionResult ItemClick()
{
    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"
    });

    ViewBag.datasource = items;
    return View();
}

Created

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

@using Syncfusion.EJ2.Buttons

@Html.EJS().SpeedDial("speeddial").OpenIconCss("e-icons e-edit").Created("CreatedEvent").Items(ViewBag.datasource).Render()

<script>
    function CreatedEvent() {
        //Your required action here
    }
</script>
public ActionResult ItemClick()
{
    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"
    });

    ViewBag.datasource = items;
    return View();
}

Before open

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

@using Syncfusion.EJ2.Buttons

@Html.EJS().SpeedDial("speeddial").OpenIconCss("e-icons e-edit").BeforeOpen("BeforeOpenEvent").Items(ViewBag.datasource).Render()

<script>
    function BeforeOpenEvent() {
        //Your required action here
    }
</script>
public ActionResult BeforeOpenEvent()
{
    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"
    });

    ViewBag.datasource = items;
    return View();
}

On open

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

@using Syncfusion.EJ2.Buttons

@Html.EJS().SpeedDial("speeddial").OpenIconCss("e-icons e-edit").OnOpen("OnOpenEvent").Items(ViewBag.datasource).Render()

<script>
    function OnOpenEvent() {
        //Your required action here
    }
</script>
public ActionResult OnOpenEvent()
{
    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"
    });
    
    ViewBag.datasource = items;
    return View();
}

Before close

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

@using Syncfusion.EJ2.Buttons

@Html.EJS().SpeedDial("speeddial").OpenIconCss("e-icons e-edit").BeforeClose("BeforeCloseEvent").Items(ViewBag.datasource).Render()

<script>
    function BeforeCloseEvent() {
        //Your required action here
    }
</script>
public ActionResult BeforeCloseEvent()
{
    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"
    });

    ViewBag.datasource = items;
    return View();
}

On close

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

@using Syncfusion.EJ2.Buttons

@Html.EJS().SpeedDial("speeddial").OpenIconCss("e-icons e-edit").OnClose("OnCloseEvent").Items(ViewBag.datasource).Render()

<script>
    function OnCloseEvent() {
        //Your required action here
    }
</script>
public ActionResult OnCloseEvent()
{
    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"
    });

    ViewBag.datasource = items;
    return View();
}

Before item render

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

@using Syncfusion.EJ2.Buttons

@Html.EJS().SpeedDial("speeddial").OpenIconCss("e-icons e-edit").BeforeItemRender("BeforeItemRenderEvent").Items(ViewBag.datasource).Render()

<script>
    function BeforeItemRenderEvent() {
        //Your required action here
    }
</script>
public ActionResult ItemRenderEvent()
{
    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"
    });

    ViewBag.datasource = items;    
    return View();
}