DevExtreme Vue - Limit the Tag Count

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");
            }
        }
    });
});

View Demo