ComboBox

The ComboBox control is one of the most powerful and flexible in C1 MVC's input module. It can be used to edit strings and to select items from lists. It is used as a base class for several other controls including AutoComplete, MultiSelect, InputTime, and Menu.

The main properties in the ComboBox control are:

itemsSource Gets or sets an array (or CollectionView) containing the items (values or objects) to choose from.
displayMemberPath Gets or sets the name of the property of the items to display in the input element and in the drop-down list.
selectedValuePath Gets or sets the name of the property of the items to use when getting or setting the value of the selectedValue property.
selectedItem Gets or sets the currently selected item in the itemsSource collection.
selectedIndex Gets or sets the index of the currently selected item.
selectedValue Gets or sets the value of the selectedValuePath property in the currently selected item.
isEditable Gets or sets a value that determines whether users should be allowed to enter values not present in the itemsSource.
isRequired Gets or sets a value that determines whether users should be allowed clear the text in the control.

This example illustrates the use of these properties:

Data

Name

Value

Zero

Low

Medium

High

100

Maximum

150

ComboBox

displayMemberPath:

name

selectedValuePath:

value

selectedItem:

{"name":"Zero","value":0}

selectedIndex:

selectedValue:

text:

Zero

// This file locates: "Scripts/Lesson/C1Input/ArchitectureComboBox.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
    var theComboBox = wijmo.Control.getControl('#theComboBox');
 
    // data used in the combo
    var theData = [
    { name: 'Zero', value: 0 },
    { name: 'Low', value: 10 },
    { name: 'Medium', value: 50 },
    { name: 'High', value: 100 },
    { name: 'Maximum', value: 150 },
    ];
 
    // show the data
    theGrid.itemsSource = theData;
 
    theComboBox.itemsSource = theData;
    theComboBox.selectedIndexChanged.addHandler(function (s, e) {
        updateAllText(s);
    });
 
    updateAllText(theComboBox);
 
    function updateAllText(combo) {
        updateText(combo, 'displayMemberPath');
        updateText(combo, 'selectedValuePath');
        updateText(combo, 'selectedIndex');
        updateText(combo, 'selectedItem');
        updateText(combo, 'selectedValue');
        updateText(combo, 'text');
    }
 
    // show current values
    function updateText(combo, prop) {
        var value = combo[prop];
        if (wijmo.isObject(value)) {
            value = JSON.stringify(value);
        }
        document.getElementById(prop).textContent = value;
    }
});

// This file locates: "Content/css/Lesson/C1Input/ArchitectureComboBox.css".
label + div {
  display: inline-block;
  max-width: 200px;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1InputController : Controller
    {
        // GET: ArchitectureComboBox
        public ActionResult ArchitectureComboBox()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Input.ArchitectureComboBox_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Input.ArchitectureComboBox_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Input.ArchitectureComboBox_Text2)
</p>
<ul>
    <li>
        @Html.Raw(Resources.C1Input.ArchitectureComboBox_Text3)
    </li>
    <li>
        @Html.Raw(Resources.C1Input.ArchitectureComboBox_Text4)
    </li>
    <li>
        @Html.Raw(Resources.C1Input.ArchitectureComboBox_Text5)
    </li>
    <li>
        @Html.Raw(Resources.C1Input.ArchitectureComboBox_Text6)
    </li>
    <li>
        @Html.Raw(Resources.C1Input.ArchitectureComboBox_Text7)
    </li>
    <li>
        @Html.Raw(Resources.C1Input.ArchitectureComboBox_Text8)
    </li>
    <li>
        @Html.Raw(Resources.C1Input.ArchitectureComboBox_Text9)
    </li>
    <li>
        @Html.Raw(Resources.C1Input.ArchitectureComboBox_Text10)
    </li>
</ul>
 
<p>
    @Html.Raw(Resources.C1Input.ArchitectureComboBox_Text11)
</p>
 
<h3>
    @Html.Raw(Resources.C1Input.ArchitectureComboBox_Title1)
</h3>
@(Html.C1().FlexGrid().Id("theGrid")
    .IsReadOnly(true)
    .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.None)
)
 
<h3>
    @Html.Raw(Resources.C1Input.ArchitectureComboBox_Title2)
</h3>
<div class="row demo-settings">
    <div class="col-xs-8">
        <label>@Html.Raw(Resources.C1Input.ArchitectureComboBox_Text12) </label>
        <div id="displayMemberPath"></div>
        <br />
        <label>@Html.Raw(Resources.C1Input.ArchitectureComboBox_Text13) </label>
        <div id="selectedValuePath"></div>
        <br />
        <label>@Html.Raw(Resources.C1Input.ArchitectureComboBox_Text14) </label>
        <div id="selectedItem"></div>
        <br />
        <label>@Html.Raw(Resources.C1Input.ArchitectureComboBox_Text15) </label>
        <div id="selectedIndex"></div>
        <br />
        <label>@Html.Raw(Resources.C1Input.ArchitectureComboBox_Text16) </label>
        <div id="selectedValue"></div>
        <br />
        <label>@Html.Raw(Resources.C1Input.ArchitectureComboBox_Text17) </label>
        <div id="text"></div>
    </div>
    <div class="col-xs-4">
        @Html.C1().ComboBox().Id("theComboBox").DisplayMemberPath("name").SelectedValuePath("value")
    </div>
</div>