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 isnull
, obtain the custom user input with thetext()
method. -
Add a new data item to the ComboBox dataSource. This will trigger a request to the remote service if
autoSync
is set totrue
. Otherwise,sync()
manually. - Before adding the new data item, attach a one-time
dataBound
handler and in that handler, use thetext()
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.