Menu
Bind Mode
This sample shows how to use a data-bound Menu control.
Features
Change the color of the square
Use HeaderPath
Description
This sample shows how to use a data-bound Menu control.
Use HeaderPath if you want to decouple the value shown in the header content from the values shown in the drop-down list.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace MvcExplorer.Controllers{ public partial class MenuController : Controller { public ActionResult BindMode() { var list = new List<Tuple<string, string>>(); list.Add(Tuple.Create("Color: red", "red")); list.Add(Tuple.Create("Color: green", "green")); list.Add(Tuple.Create("Color: blue", "blue")); return View(list); } }} |
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 57 | @model List<Tuple<string, string>>@section Scripts{ <script> function setColor(arg) { document.getElementById("box").style.background = "linear-gradient(150deg, white -30%, " + arg + ")"; } function changeHeaderPath() { var menu = wijmo.Control.getControl("#DemoMenu"); var checkbox = document.getElementById("changeHeaderPath"); if (checkbox.checked) { menu.headerPath = "Item1"; if (document.getElementById("box").style.background != '') { menu.header = menu.selectedValue.Item1; } } else { menu.headerPath = null; menu.header = "@(Resources.Menu.BindMode_Text0)"; } } </script>}@section Styles{<style> #box { width: 100px; height: 100px; color: white; background: linear-gradient(150deg, white -30%, gray); margin: 20px; box-shadow: 4px 4px 10px 0px darkgray; }</style>}<div id="box"></div>@(Html.C1().Menu().Bind(Model) .Id("DemoMenu") .Header(Resources.Menu.BindMode_Text0) .DisplayMemberPath("Item1") .Command("setColor") .CommandParameterPath("Item2"))<br /><input id="changeHeaderPath" type="checkbox" onchange="changeHeaderPath()" />@Html.Raw(Resources.Menu.BindMode_Text2)<br />@section Description{ <p>@Html.Raw(Resources.Menu.BindMode_Text1)</p> <p>@Html.Raw(Resources.Menu.BindMode_Text3)</p>} |