Menu
The Menu control extends the ComboBox to add features like a non-editable header, an itemClicked event, and commands.
The simplest way to use the Menu control is by populating the Menu via its itemsSource property and handling the itemClicked event. The event handler can inspect the menu's selectedItem property to determine which item was clicked and take the appropriate action.
File
Edit
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 | // This file locates: "Scripts/Lesson/C1Input/Menus.js". c1.documentReady(function () { var theMenuFile = wijmo.Control.getControl( '#theMenuFile' ); initMenu(theMenuFile, 'menuFile' ); theMenuFile.itemClicked.addHandler(menuClick); var theMenuEdit = wijmo.Control.getControl( '#theMenuEdit' ); initMenu(theMenuEdit, 'menuEdit' ); theMenuEdit.itemClicked.addHandler(menuClick); // use the same event handler for both function menuClick(s, e) { var msg = wijmo.format( 'You selected option **{selectedIndex}** from menu **{header}**' , s); alert(msg); } // init menu from markup function initMenu(menu, elementId) { // get host element, header, items var host = document.getElementById(elementId); var header = host.firstChild.textContent.trim(); var items = host.querySelectorAll( 'div' ); var menuItems = []; for (var i = 0; i < items.length; i++) { var item = items[i]; // the default displayMemberPath is "Header" menuItems.push({ Header: item.outerHTML }); } // clear host and instantiate menu host.innerHTML = '' ; menu.header= header; menu.itemsSource = menuItems; } }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1InputController : Controller { // GET: Menus public ActionResult Menus() { return View(); } } } |
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 | < h1 > @Html .Raw(Resources.C1Input.Menus_Title) </ h1 > < p > @Html .Raw(Resources.C1Input.Menus_Text1) </ p > < p > @Html .Raw(Resources.C1Input.Menus_Text2) </ p > < div id = "menuFile" > @Html .Raw(Resources.C1Input.Menus_Text3) < div > @Html .Raw(Resources.C1Input.Menus_Text4) </ div > < div > @Html .Raw(Resources.C1Input.Menus_Text5) </ div > < div > @Html .Raw(Resources.C1Input.Menus_Text6) </ div > < div class = "wj-separator" ></ div > < div > @Html .Raw(Resources.C1Input.Menus_Text7) </ div > </ div > < div id = "menuEdit" > @Html .Raw(Resources.C1Input.Menus_Text8) < div > @Html .Raw(Resources.C1Input.Menus_Text9) </ div > < div > @Html .Raw(Resources.C1Input.Menus_Text10) </ div > < div > @Html .Raw(Resources.C1Input.Menus_Text11) </ div > </ div > @Html .C1().Menu().Id( "theMenuFile" ) @Html .C1().Menu().Id( "theMenuEdit" ) |