Styles in ASP.NET MVC SpeedDial Control

25 Sep 202411 minutes to read

This section briefs different ways to style SpeedDial Control.

SpeedDial button

You can customize the icon and text of ASP.NET MVC SpeedDial using OpenIconCss, CloseIconCss and Content properties.

SpeedDial with Icon

You can use the OpenIconCss and CloseIconCss property to show icons in speed dial button. You can also show tooltip on hover to show additional details to end-user by setting title attribute.

CSHTML

@using Syncfusion.EJ2.Buttons

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

Icon.cs

public ActionResult Icon()
{
    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();
}

SpeedDial with Text

You can show text only in SpeedDial button by setting Content property without setting icon properties.

CSHTML

@using Syncfusion.EJ2.Buttons

@Html.EJS().SpeedDial("speeddial").Items(ViewBag.datasource).Content("Edit").Render()

Text.cs

public ActionResult Text()
{
    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();
}

SpeedDial with Icon and Text

You can show the icon and text of ASP.NET MVC Speed Dial Button using OpenIconCss, CloseIconCss and Content properties together.

CSHTML

@using Syncfusion.EJ2.Buttons

@Html.EJS().SpeedDial("speeddial").Items(ViewBag.datasource).OpenIconCss("e-icons e-edit").CloseIconCss("e-icons e-close").Content("Edit").Render()

IconText.cs

public ActionResult IconText()
{
    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();
}

Disabled

You can enable or disable the Speed Dial Control using Disabled property.

CSHTML

@using Syncfusion.EJ2.Buttons

@Html.EJS().SpeedDial("speeddial").Items(ViewBag.datasource).Disabled(true).Content("Edit").Render()

Disabled.cs

public ActionResult Disabled()
{
    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();
}

CssClass

The ASP.NET MVC Speed Dial supports the following predefined styles that can be defined using the CssClass property. You can customize by setting the CssClass property with the below defined class.

CssClass	Description
e-primary	Used to represent a primary action.
e-outline	Used to represent an appearance of button with outline.
e-info	Used to represent an informative action.
e-success	Used to represent a positive action.
e-warning	Used to represent an action with caution.
e-danger	Used to represent a negative action.

CSHTML

@using Syncfusion.EJ2.Buttons

@Html.EJS().SpeedDial("speeddial").Items(ViewBag.datasource).CssClass("e-warning").Content("Edit").Render()

CssClass.cs

public ActionResult CssClass()
{
    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();
}

Visible

You can set the Speed Dial Control to visible/hidden state using Visible property.

CSHTML

@using Syncfusion.EJ2.Buttons

@Html.EJS().SpeedDial("speeddial").Items(ViewBag.datasource).Visible(false).Content("Edit").Render()

Visible.cs

public ActionResult Visible()
{
    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();
}

Tooltip

You can show tooltip on hover to show additional details to end-user by setting Title property to speed dial items.

CSHTML

@using Syncfusion.EJ2.Buttons

@Html.EJS().SpeedDial("speeddial").Items(ViewBag.datasource).Content("Edit").Render()

Tooltip.cs

public ActionResult Tooltip()
{
    List<SpeedDialItem> items = new List<SpeedDialItem>();
    items.Add(new SpeedDialItem
    {
        Title="Cut",
        IconCss="e-icons e-cut"
    });
    items.Add(new SpeedDialItem
    {
        Title="Copy",
        IconCss="e-icons e-copy"
    });
    items.Add(new SpeedDialItem
    {
        Title="Paste",
        IconCss="e-icons e-paste"   
    });

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

Opens on hover

You can use OpensOnHover property to open actions items on hover itself. By default action items displayed only when clicking the speed dial button.

CSHTML

@using Syncfusion.EJ2.Buttons

@Html.EJS().SpeedDial("speeddial").Items(ViewBag.datasource).OpensOnHover(true).Content("Edit").Render()

Hover.cs

public ActionResult Hover()
{
    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();
}

Customized icon

You can use the CssClass property to customize the appearance of the speedDial control in its default primary state. Below example demonstrates the cssClass property usage in speedDial.

CSHTML

@using Syncfusion.EJ2.Buttons

<div id="target" style="min-height:200px; position:relative; width:300px; border:1px solid;">
    @Html.EJS().SpeedDial("speeddial").Target("#target").OpenIconCss("e-icons e-edit").CloseIconCss("e-icons e-close").CssClass("custom-css").Items(ViewBag.datasource).Render()
</div>

<style>
    .custom-css .e-btn-icon {
        color: black;
    }
</style>

Style.cs

public ActionResult Hover()
{
    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();
}