Value Pickers
The Menu control can be used as a simple value picker. It extends the ComboBox control, which allows you to bind variables to the control's selectedValue property as you would with a ComboBox.
This example ises the selectedIndexChanged event to update the Menu's header and show the current value:
Tax: 8.5%
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | // This file locates: "Scripts/Lesson/C1Input/MenusValuePickers.js". c1.documentReady(function () { var valuePicker = wijmo.Control.getControl( '#valuePicker' ); // update header to show current selection valuePicker.selectedIndexChanged.addHandler(function (s, e) { if (s.selectedIndex > -1) { s.header = wijmo.format( 'Tax: <b>{header}</b>' , s.selectedItem); } }); // populate menu after hooking up the selectedIndexChanged event valuePicker.itemsSource = [ { header: 'Exempt' , value: 0 }, { header: '1%' , value: 0.01 }, { header: '5%' , value: 0.05 }, { header: '8.5%' , value: 0.085 }, { header: '10%' , value: 0.10 }, { header: '20%' , value: 0.20 } ]; // initialize value valuePicker.selectedValue = .085; }); |
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: MenusValuePickers public ActionResult MenusValuePickers() { return View(); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < h1 > @Html .Raw(Resources.C1Input.MenusValuePickers_Title) </ h1 > < p > @Html .Raw(Resources.C1Input.MenusValuePickers_Text1) </ p > < p > @Html .Raw(Resources.C1Input.MenusValuePickers_Text2) </ p > @ (Html.C1().Menu().Id( "valuePicker" ) .DisplayMemberPath( "header" ) .SelectedValuePath( "value" ) ) |