DropDown

The DropDown control is an abstract class, used as a base for several controls. It is composed of the following elements:

input element (exposed by the inputElement property):
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).
drop-down button A button used to show or hide the drop-down element.
drop-down element (exposed by the dropDown property): 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.

All DropDown controls have the following properties and events:

text Gets or sets the current value of the inputElement.
textChanged Event that fires when the value of the text property changes..
isDroppedDown Gets or sets a value that determines whether the drop-down is currently visible.
isDroppedDownChanging, isDroppedDownChanged Events that fire when the value of the isDroppedDown property changes.
isAnimated Property that determines whether the control should use animations when showing the drop-down.
dropDownCssClass Class added to the drop-down element in order to allow CSS styling of the drop-down.
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.

Here is a simple example that demonstrates some of these properties:

isAnimated:
isDroppedDown:
dropDownCssClass:

// This file locates: "Scripts/Lesson/C1Input/DropDown.js".
c1.documentReady(function () {
    var theComboBox = wijmo.Control.getControl('#theComboBox');
    var theDate = wijmo.Control.getControl('#theDate');
 
    // customize the DropDowns
    document.getElementById('isAnimated').addEventListener('click', function (e) {
        theComboBox.isAnimated = e.target.checked;
        theDate.isAnimated = e.target.checked;
    });
    document.getElementById('isDroppedDown').addEventListener('click', function (e) {
        theComboBox.isDroppedDown = e.target.checked;
        //theDate.isDroppedDown = e.target.checked;
    });
    document.getElementById('dropDownCssClass').addEventListener('click', function (e) {
        theComboBox.dropDownCssClass = e.target.checked ? 'custom-dd' : '';
        theDate.dropDownCssClass = e.target.checked ? 'custom-dd' : '';
    });
});

// This file locates: "Content/css/Lesson/C1Input/DropDown.css".
.custom-dd {
  padding: 12px;
  font-size: 75% !important;
  font-style: italic !important;
  background: #FFF6D6 !important;
}

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

@{ 
    var countries = new[] { "Ringo", "George", "John", "Paul" };
}
 
<h1>
    @Html.Raw(Resources.C1Input.DropDown_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Input.DropDown_Text1)
</p>
<ul>
    <li>
        @Html.Raw(Resources.C1Input.DropDown_Text2)
    </li>
    <li>
        @Html.Raw(Resources.C1Input.DropDown_Text3)
    </li>
    <li>
        @Html.Raw(Resources.C1Input.DropDown_Text4)
    </li>
</ul>
<p>
    @Html.Raw(Resources.C1Input.DropDown_Text5)
</p>
<ul>
    <li>
        @Html.Raw(Resources.C1Input.DropDown_Text6)
    </li>
    <li>
        @Html.Raw(Resources.C1Input.DropDown_Text7)
    </li>
    <li>
        @Html.Raw(Resources.C1Input.DropDown_Text8)
    </li>
    <li>
        @Html.Raw(Resources.C1Input.DropDown_Text9)
    </li>
    <li>
        @Html.Raw(Resources.C1Input.DropDown_Text10)
    </li>
    <li>
        @Html.Raw(Resources.C1Input.DropDown_Text11)
    </li>
</ul>
 
<p>
    @Html.Raw(Resources.C1Input.DropDown_Text12)
</p>
 
<div class="row demo-settings">
    <div class="col-xs-6">
        <label for="isAnimated">@Html.Raw(Resources.C1Input.DropDown_Text13) </label>
        <input id="isAnimated" type="checkbox" value="false">
        <br />
        <label for="isDroppedDown">@Html.Raw(Resources.C1Input.DropDown_Text14) </label>
        <input id="isDroppedDown" type="checkbox" value="false">
        <br />
        <label for="dropDownCssClass">@Html.Raw(Resources.C1Input.DropDown_Text15) </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>