Template in ASP.NET MVC Speed Dial

21 Aug 20263 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