Create a User-Defined Item

Besides selecting the existing values, a user can add new values to the SelectBox. To enable this feature, assign true to the acceptCustomValue option. Note that you should implement the onCustomItemCreating handler to create a new entry to the data source.

HTML
JavaScript
<div id="selectBoxContainer"></div>
var selectBoxData = new DevExpress.data.DataSource({
    store: [
        { id: 1, firstName: "Andrew" },
        { id: 2, firstName: "Nancy" },
        { id: 3, firstName: "Steven" }
    ]
});

$(function() {
    $("#selectBoxContainer").dxSelectBox({
        dataSource: selectBoxData,
        valueExpr: 'id',
        displayExpr: 'firstName',
        acceptCustomValue: true,
        onCustomItemCreating: function(e) {
            // Generates a new 'id'
            var nextId = Math.max.apply(Math, selectBoxData.items().map(function(c) { return c.id; })) + 1;
            // Creates a new entry
            var newItem = { id: nextId, firstName: e.text };
            // Adds the entry to the data source
            selectBoxData.store().insert(newItem);
            // Reloads the data source
            selectBoxData.reload();

            return newItem;
        }
    });
});

View Demo

See Also