A newer version of this page is available. Switch to the current version.

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