ComboBox with Objects

You can use ComboBoxes to select arbitrary Javascript objects from arrays:

  1. Set the itemsSource property to the object array,
  2. Set the displayMemberPath property to the name of the property that should be displayed in the Combo,
  3. Optionally set the selectedValuePath property to the name of the property that should be used to calculate the combo's selectedValue property,
  4. 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>