Template in ASP.NET MVC SpeedDial Control

14 Nov 20223 minutes to read

This section explains available templates in Speed Dial Control and its usage.

Item template

You can use the ItemTemplate property to set a template content for the SpeedDialItem.

@using Syncfusion.EJ2.Buttons

@Html.EJS().SpeedDial("speeddial").Items(ViewBag.datasource).ItemTemplate("#itemTemplate").Position(FabPosition.BottomRight).OpenIconCss("e-icons e-edit").Content("Edit").Render()

<script type="text/x-jsrender" id="itemTemplate">
    <div class="itemlist">
        <span class="icon ${iconCss}" style="padding:3px"></span>
        <span class="text" style="padding:0 5px">${text}</span>
    </div>
</script>

<style>  
    .e-speeddial-li .itemlist {
        display: inherit;
        width: 100%;
        border: 1px solid transparent;
        align-items: center;
        padding: 5px;
        border-radius: 500px;
        background-color: rgba(104, 99, 104, 0.1);
        box-shadow: 0 0 4px grey;
    }
</style>
public ActionResult ItemTemplate()
{
    List<SpeedDialItem> items = new List<SpeedDialItem>();
    items.Add(new SpeedDialItem
    {
        Text="Cut",
        IconCss="e-icons e-cut"
    });
    items.Add(new SpeedDialItem
    {
        Text="Copy",
        IconCss="e-icons e-copy"
    });
    items.Add(new SpeedDialItem
    {
        Text="Paste",
        IconCss="e-icons e-paste"   
    });

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

ASP.NET MVC SpeedDial ItemTemplate

You can use the PopupTemplate property to set a template content for popup of SpeedDial control.

@using Syncfusion.EJ2.Buttons

@Html.EJS().SpeedDial("speeddial").PopupTemplate("#popupTemplate").Content("FeedBack").Render()

<script type="text/x-jsrender" id="popupTemplate">
    <div class="speeddial-form">
        <p>Here you can customize your code.</p>
    </div>
</script>

<style>  
    .speeddial-form {
        width: 200px;
        height: 80px;
        text-align: center;
        border-radius: 15px;
        box-shadow: rgb(0 0 0 / 10%) 0px 10px 15px -3px, rgb(0 0 0 / 5%) 0px 4px 6px -2px;
        background: #f5f5f5;
        padding: 15px;
    }
</style>

ASP.NET MVC SpeedDial PopupTemplate