Add Custom Items to the ComboBox Data Source

Environment

Product	Progress® Kendo UI® ComboBox for jQuery
Operating System	Windows 10 64bit
Visual Studio Version	Visual Studio 2017
Preferred Language	JavaScript

Description

How can I save an entered custom item to the remote data source of the Kendo UI ComboBox?

Solution

The suggested 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.

To achieve the desired scenario:

• 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.

<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 the remote service expects it. Otherwise, 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 the 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

• JavaScript API Reference of the Kendo UI for jQuery ComboBox
• Bypass ComboBox Boundary Detection
• Configure Deferred ComboBox Value Binding
• Define Virtual ComboBox Configuration Declaratively
• Implement ComboBox Cascading with Local Data
• Make Visible ComboBox Input Readonly
• Open ComboBox When onFocus Is Triggered
• Prevent Adding Custom ComboBox Values
• Underline Matched ComboBox Search