Your search did not match any results.
Documentation

The TagBox allows you to limit the number of displayed tags. When specified limit is exceeded, the tags are united into a single multi-tag displaying the number of selected items. The TagBox can display multi-tag alone or along with ordinary tags depending on the showMultiTagOnly option value.

Copy to CodePen
Apply
Reset
window.onload = function() { var viewModel = { maxDisplayedTags: { items: products, value: [1, 2, 3, 4], displayExpr: "Name", valueExpr: "ID", showSelectionControls: true, maxDisplayedTags: 3 }, 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 + ")"; } } }, showMultiTagOnly: { items: products, value: [1, 2, 3, 4, 5, 6, 7], displayExpr: "Name", valueExpr: "ID", showSelectionControls: true, maxDisplayedTags: 2, showMultiTagOnly: false } }; ko.applyBindings(viewModel, document.getElementById("tag-box-demo")); };
<!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.1.0/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/18.1.6/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.1.6/css/dx.light.css" /> <link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/18.1.6/css/dx.android5.light.css" /> <link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/18.1.6/css/dx.ios7.default.css" /> <link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/18.1.6/css/dx.win10.black.css" /> <link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/18.1.6/css/dx.win10.white.css" /> <script src="https://cdn3.devexpress.com/jslib/18.1.6/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"> <div id="tag-box-demo"> <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 data-bind="dxTagBox: 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 data-bind="dxTagBox: 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 data-bind="dxTagBox: 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" }];