Customize menu using events
17 Feb 20227 minutes to read
The Menu provides a set of events
to enable users to customize it.
<div class="control-section">
<div class="menu-section">
<ejs-menu id="menu" items="ViewBag.menuItems" beforeOpen="updateEventLog" beforeClose="updateEventLog" onClose="updateEventLog" onOpen="updateEventLog" select="updateEventLog"></ejs-menu>
</div>
<div class="property-section">
<table id="propertyTable" title="Event trace">
<tr>
<td>Event trace:- </td>
</tr>
<tr>
<td></td>
</tr>
</table>
</div>
<ejs-button id="clear" content="Clear" created="onClearBtnCreated"></ejs-button>
</div>
<style>
html, body, .control-section {
height: 95%;
}
.menu-section {
margin-top: 100px;
text-align: center;
float: left;
}
.property-section {
overflow: auto;
width: 40%;
height: 330px;
float: right;
font-family: monospace;
}
.property-section th {
text-align: left;
}
#clear {
float: right;
clear: both;
}
</style>
<script>
function updateEventLog(args) {
var propertyElem = document.getElementById('propertyTable');
propertyElem.getElementsByTagName('td')[0].insertAdjacentHTML('beforeend', args.name + ' Event triggered. <br />');
}
function onClearBtnCreated() {
document.getElementById("clear").onclick = function () {
var propertyElem = document.getElementById('propertyTable');
propertyElem.getElementsByTagName('td')[0].innerHTML = '';
};
}
</script>
// GET: HandleEvents
public ActionResult HandleEvents()
{
List<object> menuItems = new List<object>() {
new {
text = "Events",
items = new List<object>() {
new { text= "Conferences" },
new { text= "Music" },
new { text= "Workshops" }
}
},
new {
text = "Movies",
items = new List<object>() {
new { text= "Now Showing" },
new { text= "Coming Soon" }
}
},
new {
text = "Directory",
items = new List<object>() {
new { text= "Media Gallery" },
new { text= "Newsletters" }
}
},
new {
text = "Queries",
items = new List<object>() {
new { text= "Our Policy" },
new { text= "Site Map"},
new { text= "24x7 Support"}
}
},
new { text= "Services" }
};
ViewBag.menuItems = menuItems;
return View();
}