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.

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")