DropDownList

Description

The DropDownList widget allows a user to select a single value from a list.

Official Kendo UI DropDownList documentation

Examples

  • Basic Example
  • Passing additional options
  • Using global options

This example demonstrates passing the basic options required by the DropDownList plugin.

<input data-bind="kendoDropDownList: { data: choices, value: selectedChoice }" />
<hr/>
Selected: <strong data-bind="text: selectedChoice"> </strong>
var ViewModel = function() {
   this.choices = ko.observableArray(["apple", "orange", "banana"]);
   this.selectedChoice = ko.observable();
};

                            ko.applyBindings(new ViewModel());

Selected:

This example demonstrates binding against objects for the source data and specifying the properties to use for displaying in the field and for the value. The addChoice button and standard select show that the ComboBox is kept in sync with changes to the view model.

<button data-bind="click: open, disable: isOpen">Open</button>
<input type="checkbox" data-bind="checked: enabled" /> Enable<br/>
<hr/>
<input data-bind="kendoDropDownList: { dataTextField: 'name', dataValueField: 'id', data: choices, value: selectedChoice, isOpen: isOpen, enabled: enabled }" />
<hr/>
Selected: <strong data-bind="text: selectedChoice"> </strong>
<hr/>
<select data-bind="options: choices, optionsText: 'name', optionsValue: 'id', value: selectedChoice"> </select>
<button data-bind="click: addChoice">Add New Choice</button>
var ViewModel = function() {
    this.choices = ko.observableArray([
        { id: "1", name: "apple"},
        { id: "2", name: "orange"},
        { id: "3", name: "banana"}
    ]);

    this.selectedChoice = ko.observable();
    this.enabled = ko.observable(true);
    this.isOpen = ko.observable(false);
    this.open = function() {
        this.isOpen(true);
    };
    this.addChoice = function() {
        var num = this.choices().length + 1;
        this.choices.push({ id: num, name: "new" + num});
    };
};

                            ko.applyBindings(new ViewModel());
Enable


Selected:

This example demonstrates setting global options in ko.bindingHandlers.kendoDropDownList.options. This helps to simplify the markup for settings that can be used as a default for all instances of this widget.

<input data-bind="kendoDropDownList: { data: choices, value: selectedChoice }" />
<hr/>
Selected: <strong data-bind="text: selectedChoice"> </strong>
var ViewModel = function() {
   this.choices = ko.observableArray(["apple", "orange", "banana"]);
   this.selectedChoice = ko.observable();
};

ko.bindingHandlers.kendoDropDownList.options.optionLabel = "choose a fruit...";

                            ko.applyBindings(new ViewModel());

Selected:

Live Options

The kendoDropDownList.md binding accepts all of the options that can be specified for the widget. However, when bound against an observable, these live options will update the widget or respond to updates from interactions with the widget.
data

The source of data that is used for the dropdown options

enabled

Determines if users can interact with the field

isOpen

Indicates whether the selection box is open or closed

value

The current selected value

widget

If specified, will populate an observable with a reference to the actual widget