DevExtreme React - 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.
jQuery
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 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(); } }); });
Angular
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' const nextId = Math.max.apply(Math, this.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 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>
Vue
App.vue
<template> <DxSelectBox ... :data-source="selectBoxData" :accept-custom-value="true" display-expr="firstName" value-expr="id" @custom-item-creating="customItemCreating" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxSelectBox } from 'devextreme-vue/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" }); export default { components: { DxSelectBox }, data() { return { selectBoxData } } methods: { 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(); } } } </script>
React
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;
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.