Menu
Hierarchical Menus
This sample shows some ways to customize the Menu control.
Features
Hierachial Menu
Show menu on mouse hover:
Close menu on mouse leave:
Show the dropdown button:
Show the sub items:
Close menu on mouse leave:
Show the dropdown button:
Show the sub items:
Description
This sample shows some ways to customize the Menu control.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | using Microsoft.AspNetCore.Mvc; using System.Collections.Generic; namespace MvcExplorer.Controllers { public partial class MenuController : Controller { public ActionResult Customize() { MenuItemInfo[] menuItems = new MenuItemInfo[] { new MenuItemInfo() { Header = "File" , Items = new List<MenuItemInfo>() { new MenuItemInfo() { Header = "Save" }, new MenuItemInfo() { Header = "Open" } } }, new MenuItemInfo() { Header = "Edit" , Items = new List<MenuItemInfo>() { new MenuItemInfo() { Header = "Search" }, new MenuItemInfo() { Header = "Replace" } } } }; return View(menuItems); } } public class MenuItemInfo { public string Header { get ; set ; } public List<MenuItemInfo> Items { get ; set ; } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | @section Scripts{ <script> function changeOpenOnhover() { var menu = wijmo.Control.getControl( "#hierMenu" ); var checkbox = document.getElementById( "showOnHover" ); menu.openOnHover = checkbox. checked ; } function changeCloseOnLeave() { var menu = wijmo.Control.getControl( "#hierMenu" ); var checkbox = document.getElementById( "closeOnLeave" ); menu.closeOnLeave = checkbox. checked ; } function changeShowDropDownButton() { var menu = wijmo.Control.getControl( "#hierMenu" ); var checkbox = document.getElementById( "showButton" ); menu.showDropDownButton = checkbox. checked ; } function changeSubItems() { var menu = wijmo.Control.getControl( "#hierMenu" ); var checkbox = document.getElementById( "showSubItems" ); menu.subItemsPath = checkbox. checked ? "Items" : null ; } function itemClicked(sender) { alert( 'You\'ve selected option ' + sender.text + ' from the menu!' ); } </script> } < div > < c1-menu header = "Hierachial Menu" header-path = "Header" item-clicked = "itemClicked" open-on-hover = "true" close-on-leave = "true" show-drop-down-button = "false" id = "hierMenu" sub-items-path = "Items" > < c1-items-source source-collection = "@Model" ></ c1-items-source > </ c1-menu > </ div > < div > < p ></ p > @Html .Raw(MenuRes.Customize_OpenOnhover) < input id = "showOnHover" type = "checkbox" checked = "checked" onchange = "changeOpenOnhover()" />< br /> @Html .Raw(MenuRes.Customize_CloseOnLeave) < input id = "closeOnLeave" type = "checkbox" checked = "checked" onchange = "changeCloseOnLeave()" />< br /> @Html .Raw(MenuRes.Customize_ShowButton) < input id = "showButton" type = "checkbox" onchange = "changeShowDropDownButton()" />< br /> @Html .Raw(MenuRes.Customize_ShowSubItems) < input id = "showSubItems" type = "checkbox" checked = "checked" onchange = "changeSubItems()" />< br /> </ div > @section Description{ @Html .Raw(MenuRes.Customize_Description) } |