Binding to remote data

Select a title from Netflix:

Description
View Code
Configuration (12)
Methods (8)
Events (3)

The ComboBox widget displays flat data as a list of values and allows the selection of a single value from the list or the input of a new value. It is a richer version of the standard HTML select, providing support for local and remote data binding, item templates, and configurable options for controlling the list behavior.

If you do not want to allow user input, use the Kendo UI DropDownList.

Getting Started

There are two basic ways to create a ComboBox:

From a basic HTML input element, using data binding to define the list items
From a HTML select element, using HTML to define the list items

Regardless of the initialization technique, the resulting Kendo UI ComboBox will look and function identically.

Creating a combobox from existing input HTML element

<!-- HTML -->
<input id="combobox" />

ComboBox initialization

  $(document).ready(function(){
     $("#combobox").kendoComboBox([{text: "Item1", value: "1"}, {text: "Item2", value: "2"}]);
  });

Creating a combobox from existing select HTML element

<!-- HTML -->
<select id="combobox">
    <option>Item 1</option>
    <option>Item 2</option>
    <option>Item 3</option>
</select>

ComboBox initialization

  $(document).ready(function(){
      $("#combobox").kendComboBox();
  });

Binding to Data

The ComboBox can be bound to both local JavaScript Arrays and remote data via the Kendo DataSource component. Local JavaScript Arrays are appropriate for limited value options, while remote data binding is better for larger data sets. With remote binding, options will be loaded on-demand, similar to AutoComplete.

Binding to a remote OData service

  $(document).ready(function() {
      $("#titles").kendoComboBox({
          index: 0,
          dataTextField: "Name",
          dataValueField: "Id",
          filter: "contains",
          dataSource: {
              type: "odata",
              severFiltering: true,
              serverPaging: true,
              pageSize: 20,
              transport: {
                  read: "http://odata.netflix.com/Catalog/Titles"
              }
          }
      });
  });

Customizing Item Templates

ComboBox leverages Kendo UI high-performance Templates to give you complete control over item rendering. For a complete overview of Kendo UI Template capabilities and syntax, please review the Kendo UI Template component demos and documentation.

Basic item template customization

  <!-- HTML -->
  <input id="titles"/>
  <!-- Template -->
  <script id="scriptTemplate" type="text/x-kendo-template">
      # if (data.BoxArt.SmallUrl) { #
          <img src="${ data.BoxArt.SmallUrl }" alt="${ data.Name }" />Title:${ data.Name }, Year: ${ data.Name }
      # } else { #
          <img alt="${ data.Name }" />Title:${ data.Name }, Year: ${ data.Name }
      # } #
  </script>
  <!-- ComboBox initialization -->
  <script type="text/javascript">
      $(document).ready(function() {
          $("#titles").kendoComboBox({
              autoBind: false,
              dataTextField: "Name",
              dataValueField: "Id",
              template: $("#scriptTemplate").html(),
              dataSource: {
                  type: "odata",
                  severFiltering: true,
                  serverPaging: true,
                  pageSize: 20,
                  transport: {
                      read: "http://odata.netflix.com/Catalog/Titles"
                  }
              }
          });
      });
  </script>

No code

autoBind: Boolean(default: true)

Controls whether to bind the component on initialization.

dataSource: kendo.data.DataSource|Object

Instance of DataSource or the data that the ComboBox will be bound to.

dataTextField: String(default: "text")

Sets the field of the data item that provides the text content of the list items.

dataValueField: String(default: "value")

Sets the field of the data item that provides the value content of the list items.

delay: Number(default: 200)

Specifies the delay in ms after which the ComboBox will start filtering dataSource.

enable: Boolean(default: true)

Controls whether the ComboBox should be initially enabled.

filter: String(default: "none")

Defines the type of filtration. If "none" the ComboBox will not filter the items.

height: Number(default: 200)

Define the height of the drop-down list in pixels.

highlightFirst: Boolean(default: true)

Controls whether the first item will be automatically highlighted.

index: Number(default: -1)

Defines the initial selected item.

minLength: Number(default: 1)

Specifies the minimum characters that should be typed before the ComboBox activates

suggest: Boolean(default: false)

Controls whether the ComboBox should automatically auto-type the rest of text.

close ()
Closes the drop-down list.
Example
```
combobox.close();
```
enable (enable)

Enables/disables the combobox component

Parameters

enable: Boolean

Desired state
open ()
Opens the drop-down list.
Example
```
combobox.open();
```
search (word)
Filters dataSource using the provided parameter and rebinds drop-down list.
Example
```
var combobox = $("#combobox").data("kendoComboBox");
// Searches for item which has "In" in the name.
combobox.search("In");
```
Parameters

word: string

The filter value.

select (li)

Selects drop-down list item and sets the value and the text of the combobox.

Example

var combobox = $("#combobox").data("kendoComboBox");
// selects by jQuery object
combobox.select(combobox.ul.children().eq(0));
// selects by index
combobox.select(1);
// selects item if its text is equal to "test" using predicate function
combobox.select(function(dataItem) {
    return dataItem.text === "test";
});

Parameters

li: jQueryObject | Number | Function: LI element or index of the item or predicate function, which defines the item that should be selected.

text (text) : String
Gets/Sets the text of the ComboBox.
Example
```
var combobox = $("#combobox").data("kendoComboBox");
// get the text of the combobox.
var text = combobox.text();
```
Parameters

text: String

The text to set.

Returns

String The text of the combobox.
toggle (toggle)
Toggles the drop-down list between opened and closed state.
Example
```
var combobox = $("#combobox").data("kendoComboBox");
// toggles the open state of the drop-down list.
combobox.toggle();
```
Parameters

toggle: Boolean

Defines the whether to open/close the drop-down list.
value (value) : String
Gets/Sets the value of the combobox. If the value is undefined, text of the data item will be used.
Example
```
var combobox = $("#combobox").data("kendoComboBox");
// get the value of the combobox.
var value = combobox.value();
// set the value of the combobox.
combobox.value("1"); //looks for item which has value "1"
```
Parameters

value: String

The value to set.

Returns

String The value of the combobox.

change

Fires when the value has been changed.

close

Fires when the drop-down list is closed

open

Fires when the drop-down list is opened

Kendo

Skin

Getting Started

Creating a combobox from existing input HTML element

ComboBox initialization

Creating a combobox from existing select HTML element

ComboBox initialization

Binding to Data

Binding to a remote OData service

Customizing Item Templates

Basic item template customization

Example

Parameters

Example

Example

Parameters

Example

Parameters

Example

Parameters

Example

Parameters

Example

Parameters