Set title for Menu Items
17 Feb 20222 minutes to read
In this sample , the title for settings icon can be achievable by using beforeItemRender
client-side event in Menu component.
<ejs-menu id="menu" items="ViewBag.menuItems" beforeItemRender="itemRender"></ejs-menu>
<script>
function itemRender(args) {
if (args.item.id == 'settingIcon') {
args.element.setAttribute('title', 'Settings');
}
}
</script>
<style>
body {
margin-top: 100px;
text-align: center;
}
.em-icons {
font-family: 'e-menu';
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
text-transform: none;
}
.e-file::before {
content: '\e886';
}
.e-menu-wrapper .e-menu .e-menu-item.e-menu-caret-icon .e-icons.e-caret {
display: none;
}
.e-menu-wrapper .e-menu .e-menu-item.e-menu-caret-icon {
padding-right: 5px;
}
</style>
public ActionResult Title()
{
List<object> menuItems = new List<object>();
menuItems.Add(new
{
id: 'settingIcon',
iconCss: 'em-icons e-file',
items = new List<object>()
{
new { text = "Open",
items = new List<object>()
{
new { text = "Option 1" },
new { text = "Option 2" }
} },
new { text = "Save" },
{ separator: true },
new { text = "Exit" }
}
});
ViewBag.menuItems = menuItems;
return View();
}