React 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.

jQuery
HTML
JavaScript
<div id="selectBoxContainer"></div>
const 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'
            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
            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'
        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>
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.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'
            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
            selectBoxData.store().insert(e.customItem);
            // Reloads the data source
            selectBoxData.reload();
        }
    }
}
</script>
React
App.js
import React from 'react';
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'
        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
        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