DevExtreme Vue - 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 option. Note that you should implement the onCustomItemCreating handler to create a new data source entry.

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import SelectBox from 'devextreme-react/select-box';
  • import DataSource from "devextreme/data/data_source";
  •  
  • const selectBoxData = new DataSource({
  • store: [
  • { id: 1, firstName: "Andrew" },
  • { id: 2, firstName: "Nancy" },
  • { id: 3, firstName: "Steven" }
  • ],
  • key: "id"
  • });
  •  
  • class App extends React.Component {
  • customItemCreating(e) {
  • // Generates a new 'id'
  • const nextId = Math.max.apply(Math, selectBoxData.items().map(c => c.id)) + 1;
  • // Creates a new entry
  • e.customItem = { id: nextId, firstName: e.text };
  • // Adds the entry to the data source
  • selectBoxData.store().insert(e.customItem);
  • // Reloads the data source
  • selectBoxData.reload();
  • }
  • render() {
  • return (
  • <SelectBox ...
  • dataSource={selectBoxData}
  • valueExpr="id"
  • displayExpr="firstName"
  • acceptCustomValue={true}
  • onCustomItemCreating={this.customItemCreating}
  • />
  • );
  • }
  • }
  • export default App;

View Demo

See Also