<h1>
    ComboBox
</h1>
<p>
    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.
</p>
<p>
    The main properties in the ComboBox control are:
</p>
<ul>
    <li>
        <b>itemsSource</b>
        Gets or sets an array (or CollectionView) containing the items
        (values or objects) to choose from.
    </li>
    <li>
        <b>displayMemberPath</b>
        Gets or sets the name of the property of the items to display
        in the input element and in the drop-down list.
    </li>
    <li>
        <b>selectedValuePath</b>
        Gets or sets the name of the property of the items to use
        when getting or setting the value of the <b>selectedValue</b>
        property.
    </li>
    <li>
        <b>selectedItem</b>
        Gets or sets the currently selected item in the
        <b>itemsSource</b> collection.
    </li>
    <li>
        <b>selectedIndex</b>
        Gets or sets the index of the currently selected item.
    </li>
    <li>
        <b>selectedValue</b>
        Gets or sets the value of the <b>selectedValuePath</b>
        property in the currently selected item.
    </li>
    <li>
        <b>isEditable</b>
        Gets or sets a value that determines whether users should
        be allowed to enter values not present in the <b>itemsSource</b>.
    </li>
    <li>
        <b>isRequired</b>
        Gets or sets a value that determines whether users should be
        allowed clear the text in the control.
    </li>
</ul>

<p>
    This example illustrates the use of these properties:
</p>

<h3>
    Data
</h3>
@(Html.C1().FlexGrid().Id("theGrid")
    .IsReadOnly(true)
    .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.None)
)

<h3>
    ComboBox
</h3>
<div class="row demo-settings">
    <div class="col-xs-8">
        <label>displayMemberPath: </label>
        <div id="displayMemberPath"></div>
        <br />
        <label>selectedValuePath: </label>
        <div id="selectedValuePath"></div>
        <br />
        <label>selectedItem: </label>
        <div id="selectedItem"></div>
        <br />
        <label>selectedIndex: </label>
        <div id="selectedIndex"></div>
        <br />
        <label>selectedValue: </label>
        <div id="selectedValue"></div>
        <br />
        <label>text: </label>
        <div id="text"></div>
    </div>
    <div class="col-xs-4">
        @Html.C1().ComboBox().Id("theComboBox").DisplayMemberPath("name").SelectedValuePath("value")
    </div>
</div>