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 41 42 43 44 45 | using C1.Web.Mvc;using C1.Web.Mvc.Serialization;using System.Collections.Generic;using System.Web.Mvc;namespace MvcExplorer.Controllers{ public partial class MenuController : Controller { public ActionResult Customize() { return View(); } public ActionResult GetMenuItems([C1JsonRequest]CollectionViewRequest<MenuItemInfo> requestData) { return this.C1Json(CollectionViewHelper.Read(requestData, 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" } } }, })); } } 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 52 53 54 55 56 | @section Scripts{<script type="text/javascript"> 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> @(Html.C1().CollectionViewService().Bind("GetMenuItems").Id("mn")) @(Html.C1().Menu().Id("hierMenu").ItemsSourceId("mn") .Header("Hierachial Menu").HeaderPath("Header").ShowDropDownButton(false) .OpenOnHover(true) .CloseOnLeave(true) .OnClientItemClicked("itemClicked") .SubItemsPath("Items") )</div><div> <p></p> @Html.Raw(Resources.Menu.Customize_OpenOnhover) <input id="showOnHover" type="checkbox" checked="checked" onchange="changeOpenOnhover()" /><br /> @Html.Raw(Resources.Menu.Customize_CloseOnLeave) <input id="closeOnLeave" type="checkbox" checked="checked" onchange="changeCloseOnLeave()" /><br /> @Html.Raw(Resources.Menu.Customize_ShowButton) <input id="showButton" type="checkbox" onchange="changeShowDropDownButton()" /><br /> @Html.Raw(Resources.Menu.Customize_ShowSubItems) <input id="showSubItems" type="checkbox" checked="checked" onchange="changeSubItems()" /><br /></div>@section Description{ @Html.Raw(Resources.Menu.Customize_Description)} |