Add Custom Items to the ComboBox Data Source

The following example demonstrates how to save an entered custom item to the remote dataSource of the Kendo UI ComboBox.

To achieve this:

• Configure the ComboBox DataSource for create operations.
• Use the change event of the ComboBox to detect when a custom text is typed.
• In the change handler, check what the index of the selected item is or retrieve the current data item.
• If the selected index is -1 (minus one), or if the data item is null, obtain the custom user input with the text() method.
• Add a new data item to the ComboBox dataSource. This will trigger a request to the remote service if autoSync is set to true. Otherwise, sync() manually.
• Before adding the new data item, attach a one-time dataBound handler and in that handler, use the text() method to re-apply the custom user input. In the example below, this is as an existing data item.

Important

This approach is not designed to be used and to work in scenarios where the ComboBox is an editor of a Kendo UI anotherData widget item such as the Kendo UI Grid.

Example

<div id="example">

  <input id="combobox" style="width: 240px" />

</div>

<script>

  $(function() {

    $("#combobox").kendoComboBox({
      placeholder: "Select a product e.g. 'Chai'",
      valuePrimitive: true,
      dataTextField: "ProductName",
      dataValueField: "ProductID",
      change: onComboBoxChange,
      dataSource: {
        autoSync: true,
        // batch is set to true, because our remote service expects it. Not required
        batch: true,
        transport: {
          read: {
            url: "//demos.telerik.com/kendo-ui/service/products",
            dataType: "jsonp"
          },
          create: {
            url: "//demos.telerik.com/kendo-ui/service/products/create",
            dataType: "jsonp"
          },
          parameterMap: function(options, operation) {
            if (operation !== "read" && options.models) {
              // this request structure is required by our data service. Related to batch: true
              return { models: kendo.stringify(options.models) };
            }
          }
        },
        schema: {
          model: {
            id: "ProductID",
            fields: {
              ProductID: { editable: false, nullable: true },
              ProductName: { type: "string" },
            }
          }
        }
      }
    });

    function onComboBoxChange (e) {
      var combo = e.sender;
      // check if new value is a custom one
      if (!combo.dataItem()) {
        // select the newly created dataItem after the data service response is received
        combo.one("dataBound", function(){
          combo.text(combo.text());
        });

        // create a new dataItem. It will be submitted automatically to the remote service (autoSync is true)
        combo.dataSource.add({ ProductName: combo.text() });
      }
    }

  });

</script>

See Also

• ComboBox JavaScript API Reference
• How to Bypass Boundary Detection
• How to Configure Deferred Value Binding
• How to Define Virtual Configuration Declaratively
• How to Expand ComboBox Located in Bootstrap Layout
• How to Implement Cascading with Local Data
• How to Make Visible Input Readonly
• How to Open ComboBox When onFocus is Triggered
• How to Prevent Adding Custom Values
• How to Select Items on Tab
• How to Underline Matched Search

For more runnable examples on the Kendo UI ComboBox, check its how-to articles.