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:

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