How To Set Command Customization In ASP.NET MVC Toolbar

26 Aug 20262 minutes to read

The htmlAttributes property of the Toolbar item is used to set HTML attributes (‘ID’, ‘class’, ‘style’, ‘role’) for commands.

When style attributes are added and the same attributes already exist, they will be replaced. However, the class attribute behaves differently. Classes are appended rather than replaced.

Single or multiple CSS classes can be added to the Toolbar commands using the Toolbar item cssClass property.

CSHTML

@Html.EJS().Toolbar("defaultToolbar").Items(ViewBag.Items).Render()

Customization.cs

public ActionResult Index()
{
    List<ToolbarItem> items = new List<ToolbarItem>();
    items.Add(new ToolbarItem { Text = "Bold", Type = ItemType.Button , HtmlAttributes = new HtmlAttributes { Class = "custom_bold", Id = "itemId" } });
    items.Add(new ToolbarItem { Text = "Italic", HtmlAttributes = new HtmlAttributes { Class = "custom_italic"} });
    items.Add(new ToolbarItem { Text = "Underline", HtmlAttributes = new HtmlAttributes { Class = "custom_underline" } });
    items.Add(new ToolbarItem { Type = ItemType.Separator });
    items.Add(new ToolbarItem { Text = "Uppercase", CssClass = "e-txt-casing" });
    ViewBag.Items = items;
    return View();
}

public class HtmlAttributes
{
    public string Class { get; set; }
    public string Id { get; set; }
}

The output looks like the following.