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">
@Html.EJS().Menu("menu").Items(ViewBag.menuItems).BeforeOpen("updateEventLog").BeforeClose("updateEventLog").OnClose("updateEventLog").OnOpen("updateEventLog").Select("updateEventLog").Render()
</div>
<div class="property-section">
<table id="propertyTable" title="Event trace">
<tbody>
<th>Event trace:-</th>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
@Html.EJS().Button("clear").Content("Clear").Created("onClearBtnCreated").Render()
</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();
}