Menu
Bind Mode
This sample shows the way to use data bind with the Menu control.
Features
Change the color of the square
Use HeaderPath
Description
This sample shows the way to use data bind with the 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 | using System; using System.Collections.Generic; using Microsoft.AspNetCore.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 | @model List< Tuple < string , string >> @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 > < c1-menu id = "DemoMenu" header = "@MenuRes.BindMode_Text0" display-member-path = "Item1" execute-command = "setColor" command-parameter-path = "Item2" > < c1-items-source source-collection = "@Model" ></ c1-items-source > </ c1-menu > < br /> < input id = "changeHeaderPath" type = "checkbox" onchange = "changeHeaderPath()" /> @Html .Raw(MenuRes.BindMode_Text2) < br /> @section Description{ < p > @Html .Raw(MenuRes.BindMode_Text1)</ p > < p > @Html .Raw(MenuRes.BindMode_Text3)</ p > } @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 = "@(MenuRes.BindMode_Text0)" ; } } </script> } |