Selected Tags
The following code shows the onValueChanged event handler's implementation that limits the number of tags a user can select in the TagBox:
$(function(){ var products = [ "HD Video Player", "SuperHD Video Player", "SuperPlasma 50", "SuperLED 50", // ... ], maxItems = 2; $("#tagBoxContainer").dxTagBox({ dataSource: products, onValueChanged: function(e) { if (e.value.length > maxItems) { var newValue = e.value.slice(0, maxItems); e.component.option("value", newValue); tooltip.show(); } } }); var tooltip = $("#tooltipContainer").dxTooltip({ target: "#tagBoxContainer", position:"bottom", hideEvent: { name: "mouseout", delay: 2000 } }).dxTooltip("instance"); });
<div id="tagBoxContainer"></div> <div id="tooltipContainer">Limit reached</div>
Displayed Tags
Specify the maxDisplayedTags option to limit the number of displayed tags. In this case, when the specified limit is exceeded, the widget replaces tags with a single multi-tag displaying the number of selected items. The TagBox can display the multi-tag alone or with ordinary tags depending on the showMultiTagOnly option's value.
$(function(){ var products = [ "HD Video Player", "SuperHD Video Player", "SuperPlasma 50", "SuperLED 50", // ... ]; $("#tagBoxContainer").dxTagBox({ dataSource: products, maxDisplayedTags: 3, showMultiTagOnly: false }); });
You can also customize the multi-tag within the onMultiTagPreparing event handler. In the following code, the multi-tag's text is changed and it is shown only when a user selects all items:
$(function(){ $("#tagBoxContainer").dxTagBox({ dataSource: products, maxDisplayedTags: 2, onMultiTagPreparing: function (args) { var selectedItemsLength = args.selectedItems.length, totalCount = products.length; if (selectedItemsLength < totalCount) { args.cancel = true; } else { args.text = "All selected (" + selectedItemsLength + ")"; args.multiTagElement.addClass("red"); } } }); });
If you have technical questions, please create a support ticket in the DevExpress Support Center.