JavaScript/jQuery SelectBox - Create a User-Defined Item

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

TypeScript
HTML
  • import DataSource from "devextreme/data/data_source";
  • import { DxSelectBoxModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • selectBoxData = new DataSource({
  • store: [
  • { id: 1, firstName: "Andrew" },
  • { id: 2, firstName: "Nancy" },
  • { id: 3, firstName: "Steven" }
  • ]
  • });
  • onCustomItemCreating (e) {
  • // Generates a new 'id'
  • let nextId;
  • selectBoxData.store().totalCount().done(count => {nextId = count + 1});
  • // Creates a new entry
  • e.customItem = { id: nextId, firstName: e.text };
  • // Adds the entry to the data source
  • this.selectBoxData.store().insert(e.customItem);
  • // Reloads the data source
  • this.selectBoxData.reload();
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxSelectBoxModule
  • ],
  • // ...
  • })
  • <dx-select-box
  • [dataSource]="selectBoxData"
  • valueExpr="id"
  • displayExpr="firstName"
  • [acceptCustomValue]="true"
  • (onCustomItemCreating)="onCustomItemCreating($event)">
  • </dx-select-box>

View Demo

See Also