If you have technical questions, please create a support ticket in the DevExpress Support Center.
import React, { useCallback, useState } from 'react';
import TagBox, { TagBoxTypes } from 'devextreme-react/tag-box';
import Popover from 'devextreme-react/popover';
import ArrayStore from 'devextreme/data/array_store';
import Item from './Item.tsx';
import Tag from './Tag.tsx';
import {
simpleProducts, products, productLabel, Product,
} from './data.ts';
const disabledValue = [simpleProducts[0]];
const value = [1, 2];
const dataSource = new ArrayStore({
data: products,
key: 'Id',
});
function App() {
const [editableProducts, setEditableProducts] = useState([simpleProducts]);
const [target, setTarget] = useState(null);
const [product, setProduct] = useState<Product>({});
const onCustomItemCreating = useCallback(
(args: TagBoxTypes.CustomItemCreatingEvent) => {
const newValue = args.text;
const isItemInDataSource = editableProducts.some((item) => item === newValue);
if (!isItemInDataSource) {
setEditableProducts([newValue, editableProducts]);
}
args.customItem = newValue;
},
[editableProducts],
);
const onMouseEnter = useCallback((e: { currentTarget: any }, newProduct) => {
setTarget(e.currentTarget);
setProduct(newProduct);
}, []);
const getAltText = useCallback((text: String) => `${text}. Picture`, []);
return (
<React.Fragment>
<div className="dx-fieldset">
<div className="dx-field">
<div className="dx-field-label">Default mode</div>
<div className="dx-field-value">
<TagBox
items={simpleProducts}
inputAttr={productLabel}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Search mode</div>
<div className="dx-field-value">
<TagBox
items={simpleProducts}
searchEnabled={true}
inputAttr={productLabel}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Batch selection</div>
<div className="dx-field-value">
<TagBox
items={simpleProducts}
showSelectionControls={true}
inputAttr={productLabel}
applyValueMode="useButtons"
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Hide selected items</div>
<div className="dx-field-value">
<TagBox
items={simpleProducts}
inputAttr={productLabel}
hideSelectedItems={true}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Single line mode</div>
<div className="dx-field-value">
<TagBox
items={simpleProducts}
inputAttr={productLabel}
multiline={false}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Add custom items</div>
<div className="dx-field-value">
<TagBox
items={editableProducts}
inputAttr={productLabel}
acceptCustomValue={true}
onCustomItemCreating={onCustomItemCreating}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">With custom placeholder</div>
<div className="dx-field-value">
<TagBox
items={simpleProducts}
inputAttr={productLabel}
placeholder="Choose Product..."
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Disabled</div>
<div className="dx-field-value">
<TagBox
items={simpleProducts}
inputAttr={productLabel}
value={disabledValue}
disabled={true}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Data source</div>
<div className="dx-field-value">
<TagBox
dataSource={dataSource}
inputAttr={productLabel}
displayExpr="Name"
valueExpr="Id"
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Custom template</div>
<div className="dx-field-value">
<TagBox
dataSource={dataSource}
defaultValue={value}
inputAttr={productLabel}
displayExpr="Name"
valueExpr="Id"
itemRender={(data) => (
<Item
data={data}
getAltText={getAltText}
/>
)}
tagRender={(data) => (
<Tag
product={data}
onMouseEnter={onMouseEnter}
getAltText={getAltText}
/>
)}
/>
<Popover
showEvent="mouseenter"
hideEvent="mouseleave"
target={target}
>
<p>
<b>Name: </b>
<span>{product.Name}</span>
</p>
<p>
<b>Price: </b>
<span>{product.Price}</span>
</p>
<p>
<b>In-stock: </b>
<span>{product.Current_Inventory}</span>
</p>
<p>
<b>Category: </b>
<span>{product.Category}</span>
</p>
</Popover>
</div>
</div>
</div>
</React.Fragment>
);
}
export default App;
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
This demo illustrates the following TagBox properties:
-
items
An array of items to display in the drop-down list. Do not use the items property and the dataSource property in the same configuration. -
dataSource
Binds the TagBox to a data source, which allows you to perform complex data operations. Do not use the dataSource property and the items property in the same configuration. -
searchEnabled
Enables interactive item search. -
showSelectionControls
Enables item selection controls. -
applyValueMode
Specifies whether TagBox applies the selection instantly or after a confirmation. -
hideSelectedItems
Specifies whether TagBox removes selected items from the drop-down list. -
multiline
Specifies whether TagBox enables horizontal scrolling when the input field cannot fit all selected items. -
acceptCustomValue
Allows users to enter custom values. To enable this capability, implement the onCustomItemCreating handler. -
placeholder
Sets the value of the placeholder string. -
value
Specifies the list of currently selected items. -
disabled
Specifies whether the component responds to user interaction. -
itemTemplate
Allows you to customize the appearance and content of list items. -
tagTemplate Allows you to customize the appearance and content of list item tooltips.
To get started with the DevExtreme TagBox component, refer to the following tutorial for step-by-step instructions: Getting Started with TagBox.