Customize menu items
21 Dec 202221 minutes to read
Add or remove menu items
Menu items can be added or removed using the insertAfter, insertBefore and removeItems methods.
In the following example, the Europe menu items are added before the Oceania item, the Africa menu items are added after the Asia, and the South America and Mexico items are removed from menu.
<ejs-menu id="menu" items="ViewBag.menuItems" fields="ViewBag.menuFields" created="created"></ejs-menu>
<script>
function created(args) {
var insertBefore = [
{
continent: 'Europe',
countries: [
{ country: 'Finland' },
{ country: 'Austria' }
]
}
];
var insertItem = [
{
continent: 'Africa',
countries: [
{ country: 'Nigeria' }
]
}
];
menuObj = document.getElementById("menu").ej2_instances[0];
// Add items before to 'Oceania'
menuObj.insertBefore(insertBefore, "Oceania", false);
// Add items after to 'Asia'
menuObj.insertAfter(insertItem, "Asia", false);
// Remove items
menuObj.removeItems(['South America', 'Mexico'], false);
}
</script>
<style>
body {
margin-top: 100px;
text-align: center;
}
</style>// Customize Menu Items
public ActionResult CustomizeMenuItems()
{
List<object> menuItems = new List<object>();
menuItems.Add(new
{
continent = "Asia",
countries = new List<object>()
{
new { country = "China" },
new { country = "India" },
new { country = "Japan" }
},
});
menuItems.Add(new
{
continent = "North America",
countries = new List<object>()
{
new { country = "Canada" },
new { country = "Mexico" },
new { country = "USA" }
},
});
menuItems.Add(new
{
continent = "South America",
countries = new List<object>()
{
new { country = "Brazil" },
new { country = "Colombia" },
new { country = "Argentina" }
},
});
menuItems.Add(new
{
continent = "Oceania",
countries = new List<object>()
{
new { country = "Australia" },
new { country = "New Zealand" },
new { country = "Samoa" }
},
});
menuItems.Add(new { continent = "Antarctica" });
MenuFieldSettings menuFields = new MenuFieldSettings()
{
Text = new string[] { "continent", "country" },
Children = new string[] { "countries" }
};
ViewBag.menuItems = menuItems;
ViewBag.menuFields = menuFields;
return View();
}NOTE
To process items with
IDvalues, setisUniquetotrue.
Enable or disable menu items
You can enable and disable the menu items using the enableItems method in Menu. To enable menuItems, set the enable property in argument to true and vice-versa.
In the following example, the Directory header item, Conferences, and Music sub menu items are disabled.
<ejs-button id="enableAll" content="Enable all items" created="btnCreated"></ejs-button>
<div class="menu-section">
<ejs-menu id="menu" items="ViewBag.data" created="created" beforeOpen="beforeOpen"></ejs-menu>
</div>
<style>
.menu-section {
margin-top: 100px;
text-align: center;
}
body {
margin-top: 100px;
text-align: center;
}
</style>
<script>
var disableItems = ['Conferences', 'Music', 'Directory'];
function beforeOpen(args) {
menuObj = ej.base.getInstance(document.getElementById("menu"), ejs.navigations.Menu);
// Handling sub menu items
for (var i = 0; i < args.items.length; i++) {
if (disableItems.indexOf(args.items[i].text) > -1) {
menuObj.enableItems([args.items[i].text], false, false);
}
}
}
function created() {
menuObj = ej.base.getInstance(document.getElementById("menu"), ejs.navigations.Menu);
// Disable items
menuObj.enableItems(disableItems, false, false);
}
function btnCreated() {
buttonObj = ej.base.getInstance(document.getElementById("enableAll"), ejs.buttons.Button);
buttonObj.element.onclick = () => {
// Enable items
menuObj.enableItems(disableItems, true, false);
disableItems = [];
}
}
</script>// Enable and Disable Menu Items
public ActionResult EnableDisable()
{
List<object> data = 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.data = data;
return View();
}NOTE
To disable sub menu items, use the
beforeOpenevent.
Hide or show menu items
You can show or hide the menu items using the showItems and hideItems methods.
In the following example, the Movies header item, Workshops, and Music sub menu items are hidden in menu.
<ejs-button id="showAll" content="Show All items" created="btnCreated"></ejs-button>
<div class="menu-section">
<ejs-menu id="menu" items="ViewBag.data" created ="created" beforeOpen = "beforeOpen"></ejs-menu>
</div>
<style>
.menu-section {
margin-top: 100px;
text-align: center;
}
body {
margin-top: 100px;
text-align: center;
}
</style>
<script>
var hiddenItems = ['Workshops', 'Music', 'Movies'];
function beforeOpen(args) {
menuObj = document.getElementById("menu").ej2_instances[0];
//Handling sub menu items
for (var i = 0; i < args.items.length; i++) {
if (hiddenItems.indexOf(args.items[i].text) > -1) {
menuObj.hideItems([args.items[i].text], false);
}
}
}
function created(args) {
menuObj = document.getElementById("menu").ej2_instances[0];
menuObj.hideItems(hiddenItems, false);
}
function btnCreated(args) {
buttonObj = document.getElementById("showAll").ej2_instances[0];
buttonObj.element.onclick = () => {
menuObj.showItems(hiddenItems, false);
hiddenItems = [];
}
}
</script>public ActionResult ShowHide()
{
List<object> data = 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.data = data;
return View();
}NOTE
Using the
beforeOpenevent, you can hide the sub menu items as in the above example since the menu supports to hide items only for headers initially.