Set command customization
25 Jan 20232 minutes to read
The htmlAttributes property of the Toolbar item is used to set the HTML attributes (‘ID’, ‘class’, ‘style’ ,’role’) for the commands.
When style attributes are added, if the same attributes were already present, they will be replaced. This is not so in the case of class attribute. Classes will be added to the element instead of replacing the existing ones.
Single or multiple CSS classes can be added to the Toolbar commands using the Toolbar item cssClass property.
@Html.EJS().Toolbar("defaultToolbar").Items(ViewBag.Items).Render()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; }
}Output be like the below.
