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:
JavaScript
HTML
$(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.
JavaScript
$(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:
JavaScript
$(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");
}
}
});
});
Select one or more answers