DevExtreme jQuery/JS - 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:

jQuery
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>
Angular
HTML
TypeScript
<dx-tag-box id="tagBoxContainer"
    [dataSource]="products"
    (onValueChanged)="onValueChanged($event)">
</dx-tag-box>
<dx-tooltip
    target="#tagBoxContainer"
    position="bottom"
    [hideEvent]="{ name: 'mouseout', delay: 2000 }"
    [(visible)]="isVisible">
    <div *dxTemplate="let data of 'content'">
        <p>Limit reached</p>
    </div>
</dx-tooltip>
import { DxTagBoxModule, DxTooltipModule } from "devextreme-angular";
// ...
export class AppComponent {
    isVisible: boolean = false;
    products = [
        "HD Video Player",
        "SuperHD Video Player",
        "SuperPlasma 50",
        "SuperLED 50",
        // ...
    ];
    maxItems: number = 2;
    onValueChanged (e) {
        if (e.value.length > this.maxItems) {
            let newValue = e.value.slice(0, this.maxItems); 
            e.component.option("value", newValue);
            this.isVisible = true;
        }
    }
}
@NgModule({
     imports: [
         // ...
         DxTagBoxModule,
         DxTooltipModule
     ],
     // ...
 })

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.

jQuery
JavaScript
$(function(){
    var products = [
        "HD Video Player",
        "SuperHD Video Player",
        "SuperPlasma 50",
        "SuperLED 50",
        // ...
    ];

    $("#tagBoxContainer").dxTagBox({
        dataSource: products,
        maxDisplayedTags: 3,
        showMultiTagOnly: false
    });
});
Angular
HTML
TypeScript
<dx-tag-box
    [dataSource]="products"
    [maxDisplayedTags]="3"
    [showMultiTagOnly]="false">
</dx-tag-box>
import { DxTagBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    products = [
        "HD Video Player",
        "SuperHD Video Player",
        "SuperPlasma 50",
        "SuperLED 50",
        // ...
    ];
}
@NgModule({
     imports: [
         // ...
         DxTagBoxModule
     ],
     // ...
 })

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:

jQuery
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");
            }
        }
    });
});
Angular
HTML
TypeScript
<dx-tag-box
    [dataSource]="products"
    [maxDisplayedTags]="2"
    (onMultiTagPreparing)="onMultiTagPreparing($event)">
</dx-tag-box>
import { DxTagBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    products = [
        "HD Video Player",
        "SuperHD Video Player",
        "SuperPlasma 50",
        "SuperLED 50",
        // ...
    ];
    onMultiTagPreparing (e) {
        let selectedItemsLength = e.selectedItems.length,
            totalCount = this.products.length;
        if (selectedItemsLength < totalCount) {
            e.cancel = true;
        } else {
            e.text = "All selected (" + selectedItemsLength + ")";
            e.multiTagElement.classList.add("red");
        }
    }
}
@NgModule({
     imports: [
         // ...
         DxTagBoxModule
     ],
     // ...
 })

View Demo