Tag Count Limitation - React Tag Box

import React from 'react'; import { TagBox, TagBoxTypes } from 'devextreme-react/tag-box'; import { products, productLabel } from './data.ts'; const defaultValues = { severalItems: [1, 2, 3, 4], allItems: [1, 2, 3, 4, 5], ordinaryTags: [1, 2, 3, 4, 5, 6, 7], }; const items = products.slice(0, 5); const onMultiTagPreparing = (args: TagBoxTypes.MultiTagPreparingEvent) => { const selectedItemsLength = args.selectedItems.length; const totalCount = 5; if (selectedItemsLength < totalCount) { args.cancel = true; } else { args.text = `All selected (${selectedItemsLength})`; } }; function App() { return ( <div> <div className="dx-fieldset"> <div className="dx-field"> <div className="dx-field-label">Multi-tag for several items</div> <div className="dx-field-value"> <TagBox items={products} defaultValue={defaultValues.severalItems} showSelectionControls={true} maxDisplayedTags={3} inputAttr={productLabel} displayExpr="Name" valueExpr="ID" selectAllMode="allPages" /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Multi-tag for all items</div> <div className="dx-field-value"> <TagBox items={items} defaultValue={defaultValues.allItems} inputAttr={productLabel} showSelectionControls={true} maxDisplayedTags={3} displayExpr="Name" valueExpr="ID" onMultiTagPreparing={onMultiTagPreparing} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Multi-tag with ordinary tags</div> <div className="dx-field-value"> <TagBox items={products} defaultValue={defaultValues.ordinaryTags} showSelectionControls={true} maxDisplayedTags={2} inputAttr={productLabel} showMultiTagOnly={false} displayExpr="Name" valueExpr="ID" selectAllMode="allPages" /> </div> </div> </div> </div> ); } export default App;

import React from 'react'; import { TagBox } from 'devextreme-react/tag-box'; import { products, productLabel } from './data.js'; const defaultValues = { severalItems: [1, 2, 3, 4], allItems: [1, 2, 3, 4, 5], ordinaryTags: [1, 2, 3, 4, 5, 6, 7], }; const items = products.slice(0, 5); const onMultiTagPreparing = (args) => { const selectedItemsLength = args.selectedItems.length; const totalCount = 5; if (selectedItemsLength < totalCount) { args.cancel = true; } else { args.text = `All selected (${selectedItemsLength})`; } }; function App() { return ( <div> <div className="dx-fieldset"> <div className="dx-field"> <div className="dx-field-label">Multi-tag for several items</div> <div className="dx-field-value"> <TagBox items={products} defaultValue={defaultValues.severalItems} showSelectionControls={true} maxDisplayedTags={3} inputAttr={productLabel} displayExpr="Name" valueExpr="ID" selectAllMode="allPages" /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Multi-tag for all items</div> <div className="dx-field-value"> <TagBox items={items} defaultValue={defaultValues.allItems} inputAttr={productLabel} showSelectionControls={true} maxDisplayedTags={3} displayExpr="Name" valueExpr="ID" onMultiTagPreparing={onMultiTagPreparing} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Multi-tag with ordinary tags</div> <div className="dx-field-value"> <TagBox items={products} defaultValue={defaultValues.ordinaryTags} showSelectionControls={true} maxDisplayedTags={2} inputAttr={productLabel} showMultiTagOnly={false} displayExpr="Name" valueExpr="ID" selectAllMode="allPages" /> </div> </div> </div> </div> ); } export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render(<App />, document.getElementById('app'));

export const products = [{ ID: 1, Name: 'HD Video Player', Price: 330, Current_Inventory: 225, Backorder: 0, Manufacturing: 10, Category: 'Video Players', ImageSrc: 'images/products/1.png', }, { ID: 2, Name: 'SuperHD Video Player', Price: 400, Current_Inventory: 150, Backorder: 0, Manufacturing: 25, Category: 'Video Players', ImageSrc: 'images/products/2.png', }, { ID: 3, Name: 'SuperPlasma 50', Price: 2400, Current_Inventory: 0, Backorder: 0, Manufacturing: 0, Category: 'Televisions', ImageSrc: 'images/products/3.png', }, { ID: 4, Name: 'SuperLED 50', Price: 1600, Current_Inventory: 77, Backorder: 0, Manufacturing: 55, Category: 'Televisions', ImageSrc: 'images/products/4.png', }, { ID: 5, Name: 'SuperLED 42', Price: 1450, Current_Inventory: 445, Backorder: 0, Manufacturing: 0, Category: 'Televisions', ImageSrc: 'images/products/5.png', }, { ID: 6, Name: 'SuperLCD 55', Price: 1350, Current_Inventory: 345, Backorder: 0, Manufacturing: 5, Category: 'Televisions', ImageSrc: 'images/products/6.png', }, { ID: 7, Name: 'SuperLCD 42', Price: 1200, Current_Inventory: 210, Backorder: 0, Manufacturing: 20, Category: 'Televisions', ImageSrc: 'images/products/7.png', }, { ID: 8, Name: 'SuperPlasma 65', Price: 3500, Current_Inventory: 0, Backorder: 0, Manufacturing: 0, Category: 'Televisions', ImageSrc: 'images/products/8.png', }, { ID: 9, Name: 'SuperLCD 70', Price: 4000, Current_Inventory: 95, Backorder: 0, Manufacturing: 5, Category: 'Televisions', ImageSrc: 'images/products/9.png', }, { ID: 10, Name: 'DesktopLED 21', Price: 175, Current_Inventory: null, Backorder: 425, Manufacturing: 75, Category: 'Monitors', ImageSrc: 'images/products/10.png', }, { ID: 12, Name: 'DesktopLCD 21', Price: 170, Current_Inventory: 210, Backorder: 0, Manufacturing: 60, Category: 'Monitors', ImageSrc: 'images/products/12.png', }, { ID: 13, Name: 'DesktopLCD 19', Price: 160, Current_Inventory: 150, Backorder: 0, Manufacturing: 210, Category: 'Monitors', ImageSrc: 'images/products/13.png', }, { ID: 14, Name: 'Projector Plus', Price: 550, Current_Inventory: null, Backorder: 55, Manufacturing: 10, Category: 'Projectors', ImageSrc: 'images/products/14.png', }, { ID: 15, Name: 'Projector PlusHD', Price: 750, Current_Inventory: 110, Backorder: 0, Manufacturing: 90, Category: 'Projectors', ImageSrc: 'images/products/15.png', }, { ID: 16, Name: 'Projector PlusHT', Price: 1050, Current_Inventory: 0, Backorder: 75, Manufacturing: 57, Category: 'Projectors', ImageSrc: 'images/products/16.png', }, { ID: 17, Name: 'ExcelRemote IR', Price: 150, Current_Inventory: 650, Backorder: 0, Manufacturing: 190, Category: 'Automation', ImageSrc: 'images/products/17.png', }, { ID: 18, Name: 'ExcelRemote Bluetooth', Price: 180, Current_Inventory: 310, Backorder: 0, Manufacturing: 0, Category: 'Automation', ImageSrc: 'images/products/18.png', }, { ID: 19, Name: 'ExcelRemote IP', Price: 200, Current_Inventory: 0, Backorder: 325, Manufacturing: 225, Category: 'Automation', ImageSrc: 'images/products/19.png', }]; export const productLabel = { 'aria-label': 'Product' };

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

export const products = [ { ID: 1, Name: 'HD Video Player', Price: 330, Current_Inventory: 225, Backorder: 0, Manufacturing: 10, Category: 'Video Players', ImageSrc: 'images/products/1.png', }, { ID: 2, Name: 'SuperHD Video Player', Price: 400, Current_Inventory: 150, Backorder: 0, Manufacturing: 25, Category: 'Video Players', ImageSrc: 'images/products/2.png', }, { ID: 3, Name: 'SuperPlasma 50', Price: 2400, Current_Inventory: 0, Backorder: 0, Manufacturing: 0, Category: 'Televisions', ImageSrc: 'images/products/3.png', }, { ID: 4, Name: 'SuperLED 50', Price: 1600, Current_Inventory: 77, Backorder: 0, Manufacturing: 55, Category: 'Televisions', ImageSrc: 'images/products/4.png', }, { ID: 5, Name: 'SuperLED 42', Price: 1450, Current_Inventory: 445, Backorder: 0, Manufacturing: 0, Category: 'Televisions', ImageSrc: 'images/products/5.png', }, { ID: 6, Name: 'SuperLCD 55', Price: 1350, Current_Inventory: 345, Backorder: 0, Manufacturing: 5, Category: 'Televisions', ImageSrc: 'images/products/6.png', }, { ID: 7, Name: 'SuperLCD 42', Price: 1200, Current_Inventory: 210, Backorder: 0, Manufacturing: 20, Category: 'Televisions', ImageSrc: 'images/products/7.png', }, { ID: 8, Name: 'SuperPlasma 65', Price: 3500, Current_Inventory: 0, Backorder: 0, Manufacturing: 0, Category: 'Televisions', ImageSrc: 'images/products/8.png', }, { ID: 9, Name: 'SuperLCD 70', Price: 4000, Current_Inventory: 95, Backorder: 0, Manufacturing: 5, Category: 'Televisions', ImageSrc: 'images/products/9.png', }, { ID: 10, Name: 'DesktopLED 21', Price: 175, Current_Inventory: null, Backorder: 425, Manufacturing: 75, Category: 'Monitors', ImageSrc: 'images/products/10.png', }, { ID: 12, Name: 'DesktopLCD 21', Price: 170, Current_Inventory: 210, Backorder: 0, Manufacturing: 60, Category: 'Monitors', ImageSrc: 'images/products/12.png', }, { ID: 13, Name: 'DesktopLCD 19', Price: 160, Current_Inventory: 150, Backorder: 0, Manufacturing: 210, Category: 'Monitors', ImageSrc: 'images/products/13.png', }, { ID: 14, Name: 'Projector Plus', Price: 550, Current_Inventory: null, Backorder: 55, Manufacturing: 10, Category: 'Projectors', ImageSrc: 'images/products/14.png', }, { ID: 15, Name: 'Projector PlusHD', Price: 750, Current_Inventory: 110, Backorder: 0, Manufacturing: 90, Category: 'Projectors', ImageSrc: 'images/products/15.png', }, { ID: 16, Name: 'Projector PlusHT', Price: 1050, Current_Inventory: 0, Backorder: 75, Manufacturing: 57, Category: 'Projectors', ImageSrc: 'images/products/16.png', }, { ID: 17, Name: 'ExcelRemote IR', Price: 150, Current_Inventory: 650, Backorder: 0, Manufacturing: 190, Category: 'Automation', ImageSrc: 'images/products/17.png', }, { ID: 18, Name: 'ExcelRemote Bluetooth', Price: 180, Current_Inventory: 310, Backorder: 0, Manufacturing: 0, Category: 'Automation', ImageSrc: 'images/products/18.png', }, { ID: 19, Name: 'ExcelRemote IP', Price: 200, Current_Inventory: 0, Backorder: 325, Manufacturing: 225, Category: 'Automation', ImageSrc: 'images/products/19.png', }, ]; export const productLabel = { 'aria-label': 'Product' };

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.7/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

.dx-field { margin-bottom: 50px; }

React Tag Box - Tag Count Limitation