jQuery TagBox - Create a User-Defined Item
A user can select existing values and add new values to the TagBox. To enable this feature, assign true to the acceptCustomValue property. Note that you need to implement the onCustomItemCreating handler to create a new data source entry.
jQuery
HTML
JavaScript
<div id="tagBoxContainer"></div>
const 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' let nextId; tagBoxData.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 tagBoxData.store().insert(e.customItem); // Reloads the data source tagBoxData.reload(); } });
Angular
HTML
TypeScript
<dx-tag-box [dataSource]="tagBoxData" valueExpr="id" displayExpr="firstName" [acceptCustomValue]="true" (onCustomItemCreating)="onCustomItemCreating($event)"> </dx-tag-box>
import DataSource from "devextreme/data/data_source"; import { DxTagBoxModule } from "devextreme-angular"; // ... export class AppComponent { tagBoxData: DataSource = new DataSource({ store: [ { id: 1, firstName: "Andrew" }, { id: 2, firstName: "Nancy" }, { id: 3, firstName: "Steven" } ] }); onCustomItemCreating (e) { // Generates a new 'id' let nextId; tagBoxData.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.tagBoxData.store().insert(e.customItem); // Reloads the data source this.tagBoxData.reload(); } } @NgModule({ imports: [ // ... DxTagBoxModule ], // ... })
Vue
<template> <DxTagBox :data-source="tagBoxData" :accept-custom-value="true" value-expr="id" display-expr="firstName" @custom-item-creating="onCustomItemCreating" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxTagBox } from 'devextreme-vue/tag-box'; import DataSource from "devextreme/data/data_source"; export default { components: { DxTagBox }, data() { return { tagBoxData: new DataSource({ store: [ { id: 1, firstName: "Andrew" }, { id: 2, firstName: "Nancy" }, { id: 3, firstName: "Steven" } ] }); }; }, methods: { onCustomItemCreating(e) { // Generates a new 'id' let nextId; tagBoxData.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.tagBoxData.store().insert(e.customItem); // Reloads the data source this.tagBoxData.reload(); } } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { TagBox } from 'devextreme-react/tag-box'; import DataSource from "devextreme/data/data_source"; const tagBoxData = new DataSource({ store: [ { id: 1, firstName: "Andrew" }, { id: 2, firstName: "Nancy" }, { id: 3, firstName: "Steven" } ] }); class App extends React.Component { constructor(props) { super(props); this.onCustomItemCreating = this.onCustomItemCreating.bind(this); } onCustomItemCreating(e) { // Generates a new 'id' let nextId; tagBoxData.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 tagBoxData.store().insert(e.customItem); // Reloads the data source tagBoxData.reload(); } render() { return ( <TagBox dataSource={tagBoxData} acceptCustomValue={true} valueExpr="id" displayExpr="firstName" onCustomItemCreating={this.onCustomItemCreating} /> ); } } 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.