Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Free Trial Buy
    Your search did not match any results.
    Tag Box

    Tag Count Limitation

    Documentation

    You can use the maxDisplayedTags option to limit the number of displayed tags. When the specified limit is exceeded, the tags are combined into a single multi-tag that displays the number of selected items. Use the showMultiTagOnly option to specify whether to display a multi-tag only or other tags as well. You can also use onMultiTagPreparing event handler to customize the multi-tag, as shown in the second example.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Copy to CodeSandBox
    Apply
    Reset
    <template> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label"> Multi-tag for several items </div> <div class="dx-field-value"> <DxTagBox :items="products" :value="[1, 2, 3, 4]" :show-selection-controls="true" :max-displayed-tags="3" display-expr="Name" value-expr="Id" select-all-mode="allPages" /> </div> </div> <div class="dx-field"> <div class="dx-field-label"> Multi-tag for all items </div> <div class="dx-field-value"> <DxTagBox :items="items" :value="[1, 2, 3, 4, 5]" :show-selection-controls="true" :max-displayed-tags="3" display-expr="Name" value-expr="Id" @multiTagPreparing="onMultiTagPreparing" /> </div> </div> <div class="dx-field"> <div class="dx-field-label"> Multi-tag with ordinary tags </div> <div class="dx-field-value"> <DxTagBox :items="products" :value="[1, 2, 3, 4, 5, 6, 7]" :show-selection-controls="true" :max-displayed-tags="2" :show-multi-tag-only="false" display-expr="Name" value-expr="Id" select-all-mode="allPages" /> </div> </div> </div> </template> <script> import DxTagBox from 'devextreme-vue/tag-box'; import { products } from './data.js'; export default { components: { DxTagBox }, data() { return { products, items: products.slice(0, 5), onMultiTagPreparing: (args) => { const selectedItemsLength = args.selectedItems.length; const totalCount = 5; if(selectedItemsLength < totalCount) { args.cancel = true; } else { args.text = `All selected (${ selectedItemsLength })`; } } }; } }; </script> <style scoped> .dx-field { margin-bottom: 50px; } </style>
    import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
    <!DOCTYPE html> <html> <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=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/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.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>
    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' }];
    System.config({ transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader' }, }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'vue': 'npm:vue@3.0.0/dist/vue.esm-browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.0.15/index.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.25.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@20.2.4', 'devextreme-vue': 'npm:devextreme-vue@20.2.4', 'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@0.9.7/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.0.5/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.8/dist/dx-gantt.js', 'preact': 'npm:preact@10.5.7/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.7/hooks/dist/hooks.js', 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js' }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });