@{ 
    var countries = new[] { "Ringo", "George", "John", "Paul" };
}

<h1>
    DropDown
</h1>
<p>
    The DropDown control is an abstract class, used as a base
    for several controls. It is composed of the following elements:
</p>
<ul>
    <li>
        <b>input element</b> (exposed by the <b>inputElement</b> property):<br />
        An HTML input element used to display and edit the current value.
        In a few cases, this element may be replaced with a non-editable
        element (e.g. Menu and MultiSelect controls).
    </li>
    <li>
        <b>drop-down button</b>
        A button used to show or hide the drop-down element.
    </li>
    <li>
        <b>drop-down element (exposed by the <b>dropDown</b> property)</b>:
        An HTML element shown when the user presses the drop-down
        button or the F4 key. The user interacts with the drop-down
        element to update the value of the input element and of the
        control.
    </li>
</ul>
<p>
    All DropDown controls have the following properties and events:
</p>
<ul>
    <li>
        <b>text</b>
        Gets or sets the current value of the <b>inputElement</b>.
    </li>
    <li>
        <b>textChanged</b>
        Event that fires when the value of the <b>text</b> property changes..
    </li>
    <li>
        <b>isDroppedDown</b>
        Gets or sets a value that determines whether the drop-down is
        currently visible.
    </li>
    <li>
        <b>isDroppedDownChanging, isDroppedDownChanged</b>
        Events that fire when the value of the <b>isDroppedDown</b>
        property changes.
    </li>
    <li>
        <b>isAnimated</b>
        Property that determines whether the control should use
        animations when showing the drop-down.
    </li>
    <li>
        <b>dropDownCssClass</b>
        Class added to the drop-down element in order to allow CSS
        styling of the drop-down.<br />
        This property is useful because when the drop-down is displayed,
        it is usually re-parented to become a direct child of the
        document's body, which prevents it from inheriting the styles
        of the control's host element.
    </li>
</ul>

<p>
    Here is a simple example that demonstrates some of these
    properties:
</p>

<div class="row demo-settings">
    <div class="col-xs-6">
        <label for="isAnimated">isAnimated: </label>
        <input id="isAnimated" type="checkbox" value="false">
        <br />
        <label for="isDroppedDown">isDroppedDown: </label>
        <input id="isDroppedDown" type="checkbox" value="false">
        <br />
        <label for="dropDownCssClass">dropDownCssClass: </label>
        <input id="dropDownCssClass" type="checkbox" value="false">
    </div>
    <div class="col-xs-6">
        <div id="theComboBox"></div>
        @(Html.C1().ComboBox().Id("theComboBox")
            .Bind(countries))
        <br />
        @(Html.C1().InputDate().Id("theDate"))
    </div>
</div>