ComboBox with Strings

By default, the ComboBox acts as a regular HTML input element, with the additional styling and object model associated with all Wijmo controls. The text property gets or sets the user's input:

Any string:

You have typed this: .

Choosing from Lists

If you want to provide a list of strings for users to choose from, set the itemsSource property to an array containing those items and users will be able to select one of them:

Select a Country:

You have selected this country: China.

Simple Customizations

By default, the ComboBox will force users to select one of the items on the list. Users will not be able to leave the combo empty or to enter values that are not on the list.

You can change these behaviors by setting the isRequired and isEditable properties:

isRequired

isEditable

Select a Country:

You have selected this country: China.

// This file locates: "Scripts/Lesson/C1Input/ComboBoxStrings.js".
c1.documentReady(function () {
    var theComboNoSrc = wijmo.Control.getControl('#theComboNoSrc');
    var theCombo = wijmo.Control.getControl('#theCombo');
    var theComboCustom = wijmo.Control.getControl('#theComboCustom');
 
    setText('theComboText', theComboNoSrc.text);
    theComboNoSrc.textChanged.addHandler(function (s, e) {
        setText('theComboText', s.text);
    });
 
    setText('theComboValue', theCombo.selectedValue);
    theCombo.textChanged.addHandler(function (s, e) {
        setText('theComboValue', s.selectedValue);
    });
 
    setText('theComboCustomValue', theComboCustom.text);
    theComboCustom.textChanged.addHandler(function (s, e) {
        setText('theComboCustomValue', s.text);
    });
 
    // handle checkboxes
    document.getElementById('isRequired').addEventListener('click', function (e) {
        theComboCustom.isRequired = e.target.checked;
    })
    document.getElementById('isEditable').addEventListener('click', function (e) {
        theComboCustom.isEditable = e.target.checked;
    })
 
    // show text in an element on the page
    function setText(id, value) {
        document.getElementById(id).textContent = value;
    }
});

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

@model IEnumerable<string>
 
<h1>
    @Html.Raw(Resources.C1Input.ComboBoxStrings_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Input.ComboBoxStrings_Text1)
</p>
<label for="theComboNoSrc">@Html.Raw(Resources.C1Input.ComboBoxStrings_Text2)</label>
@Html.C1().ComboBox().Id("theComboNoSrc").ShowDropDownButton(false)
<p>
    @Html.Raw(Resources.C1Input.ComboBoxStrings_Text3)
</p>
<br />
 
<h4>
    @Html.Raw(Resources.C1Input.ComboBoxStrings_Title1)
</h4>
<p>
    @Html.Raw(Resources.C1Input.ComboBoxStrings_Text4)
</p>
<label for="theCombo">@Html.Raw(Resources.C1Input.ComboBoxStrings_Text5)</label>
@Html.C1().ComboBox().Id("theCombo").Bind(Model)
<p>
    @Html.Raw(Resources.C1Input.ComboBoxStrings_Text6)
</p>
<br />
 
<h4>
    @Html.Raw(Resources.C1Input.ComboBoxStrings_Title2)
</h4>
<p>
    @Html.Raw(Resources.C1Input.ComboBoxStrings_Text7)
</p>
<p>
    @Html.Raw(Resources.C1Input.ComboBoxStrings_Text8)
</p>
<p>
    <label>
        <input id="isRequired" type="checkbox">
        @Html.Raw(Resources.C1Input.ComboBoxStrings_Text9)
    </label>
</p>
<p>
    <label>
        <input id="isEditable" type="checkbox" checked="checked">
        @Html.Raw(Resources.C1Input.ComboBoxStrings_Text10)
    </label>
</p>
<label for="theComboCustom">@Html.Raw(Resources.C1Input.ComboBoxStrings_Text11)</label>
@Html.C1().ComboBox().Id("theComboCustom").Bind(Model).IsRequired(false).IsEditable(true).Placeholder(Resources.C1Input.ComboBoxStrings_Text12)
<p>
    @Html.Raw(Resources.C1Input.ComboBoxStrings_Text13) <b id="theComboCustomValue"></b>.
</p>