Create a User-Defined Item
Besides selecting the existing values, a user can add new values to the TagBox. 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
<div id="tagBoxContainer"></div>
JavaScript
var tagBoxData = new DevExpress.data.DataSource({ store: [ { id: 1, firstName: "Andrew" }, { id: 2, firstName: "Nancy" }, { id: 3, firstName: "Steven" } ] }); $("#tagBoxContainer").dxTagBox({ dataSource: tagBoxData, valueExpr: 'id', displayExpr: 'firstName', acceptCustomValue: true, onCustomItemCreating: function(e){ // Generates a new 'id' var nextId = Math.max.apply(Math, tagBoxData.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 tagBoxData.store().insert(newItem); // Reloads the data source tagBoxData.reload(); return newItem; } });
See Also
characters remaining