ComboBox with Objects
You can use ComboBoxes to select arbitrary Javascript objects from arrays:
- Set the itemsSource property to the object array,
- Set the displayMemberPath property to the name of the property that should be displayed in the Combo,
- Optionally set the selectedValuePath property to the name of the property that should be used to calculate the combo's selectedValue property,
- Use the combo's selectedIndex, selectedValue, or text to retrieve the current selection.
The current text is: China.
The selectedIndex is: 0.
The selectedValue is: $72,624.33.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // This file locates: "Scripts/Lesson/C1Input/ComboBoxObjects.js". c1.documentReady(function () { var theCombo = wijmo.Control.getControl( '#theCombo' ); // select an item setSelectedInfo(theCombo); theCombo.selectedIndexChanged.addHandler(function (s, e) { setSelectedInfo(s); }); function setSelectedInfo(s) { setText( 'theComboText' , s.text); setText( 'theComboIndex' , s.selectedIndex); setText( 'theComboValue' , wijmo.Globalize.format(s.selectedValue, 'c' )); } // show text in an element on the page function setText(id, value) { document.getElementById(id).textContent = value; } }); |
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: ComboBoxObjects public ActionResult ComboBoxObjects() { return View(Models.InputData.GetSales()); } } } |
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 | @model IEnumerable< InputData.Sale > < h1 > @Html .Raw(Resources.C1Input.ComboBoxObjects_Title) </ h1 > < p > @Html .Raw(Resources.C1Input.ComboBoxObjects_Text1) </ p > < ol > < li > @Html .Raw(Resources.C1Input.ComboBoxObjects_Text2) </ li > < li > @Html .Raw(Resources.C1Input.ComboBoxObjects_Text3) </ li > < li > @Html .Raw(Resources.C1Input.ComboBoxObjects_Text4) </ li > < li > @Html .Raw(Resources.C1Input.ComboBoxObjects_Text5) </ li > </ ol > < label for = "theCombo" > @Html .Raw(Resources.C1Input.ComboBoxObjects_Text6)</ label > @ (Html.C1().ComboBox< InputData.Sale >().Id( "theCombo" ).Bind(Model).DisplayMemberPath( "Country" ).SelectedValuePath( "Sales" )) < p > @Html .Raw(Resources.C1Input.ComboBoxObjects_Text7) </ p > < p > @Html .Raw(Resources.C1Input.ComboBoxObjects_Text8) </ p > < p > @Html .Raw(Resources.C1Input.ComboBoxObjects_Text9) </ p > |