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();
}