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.

Copy to CodePen
Apply
Reset
var DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', function DemoController($scope) { $scope.maxDisplayedTags = { items: products, value: [1, 2, 3, 4], displayExpr: "Name", valueExpr: "ID", showSelectionControls: true, maxDisplayedTags: 3 }; $scope.onMultiTagPreparing = { items: products.slice(0, 5), value: [1, 2, 3, 4, 5], displayExpr: "Name", valueExpr: "ID", showSelectionControls: true, maxDisplayedTags: 3, onMultiTagPreparing: function(args){ var selectedItemsLength = args.selectedItems.length, totalCount = 5; if (selectedItemsLength < totalCount) { args.cancel = true; } else { args.text = "All selected (" + selectedItemsLength + ")"; } } }; $scope.showMultiTagOnly = { items: products, value: [1, 2, 3, 4, 5, 6, 7], displayExpr: "Name", valueExpr: "ID", showSelectionControls: true, maxDisplayedTags: 2, showMultiTagOnly: false }; });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" > <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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C\/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/19.2.4/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container" ng-app="DemoApp" ng-controller="DemoController"> <div class="form"> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label"> Multi-tag for several items </div> <div class="dx-field-value"> <div dx-tag-box="maxDisplayedTags"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label"> Multi-tag for all items </div> <div class="dx-field-value"> <div dx-tag-box="onMultiTagPreparing"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label"> Multi-tag with ordinary tags </div> <div class="dx-field-value"> <div dx-tag-box="showMultiTagOnly"></div> </div> </div> </div> </div> </div> </body> </html>
.dx-field { margin-bottom: 50px; }
var 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" }];