All docs
V21.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

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(){
    const 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) {
                const newValue = e.value.slice(0, maxItems); 
                e.component.option("value", newValue);
                tooltip.show();
            }
        }
    });

    const 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
     ],
     // ...
 })
Vue
<template>
    <div>
        <DxTagBox
            id="tagBoxContainer"
            :data-source="products"
            @value-changed="onValueChanged"
        />
        <DxTooltip 
            target="#tagBoxContainer"
            :hide-event="hideEvent"
            position="bottom"
            :visible="isTooltipVisible">
            <template>
                <p>Limit reached</p>
            </template>
        </DxTooltip>
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxTagBox } from 'devextreme-vue/tag-box';
import { DxTooltip } from 'devextreme-vue/tooltip';

export default {
    components: {
        DxTagBox,
        DxTooltip
    },
    data() {
        return {
            hideEvent: { name: 'mouseout', delay: 2000 },
            products: [
                "HD Video Player",
                "SuperHD Video Player",
                "SuperPlasma 50",
                "SuperLED 50",
                // ...
            ],
            isTooltipVisible: false,
            maxItems: 2
        };
    },
    methods: {
        onValueChanged(e) {
            if (e.value.length > this.maxItems) {
                const newValue = e.value.slice(0, this.maxItems);
                e.component.option('value', newValue);
                this.isTooltipVisible = true;
            }
        }
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { TagBox } from 'devextreme-react/tag-box';
import { Tooltip } from 'devextreme-react/tooltip';

const products = [
    "HD Video Player",
    "SuperHD Video Player",
    "SuperPlasma 50",
    "SuperLED 50",
    // ...
];

const renderContent = () => {
    return (
        <p>Limit reached</p>
    );
}

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isTooltipVisible: false
        }

        this.maxItems = 2;
        this.hideEvent = { delay: 2000, name: "mouseout" };

        this.onValueChanged = this.onValueChanged.bind(this);
        this.onTooltipHiding = this.onTooltipHiding.bind(this);
    }

    onValueChanged(e) {
        if (e.value.length > this.maxItems) {
            const newValue = e.value.slice(0, this.maxItems);
            e.component.option('value', newValue);
            this.setState({
                isTooltipVisible: true
            });
        }
    }

    onTooltipHiding(e) {
        this.setState({
            isTooltipVisible: false
        });
    }

    render() {
        return (
            <div>
                <TagBox
                    id="tagBoxContainer"
                    dataSource={products}
                    onValueChanged={this.onValueChanged}
                />
                <Tooltip
                    target="#tagBoxContainer"
                    hideEvent={this.hideEvent}
                    contentRender={renderContent}
                    position="bottom"
                    visible={this.state.isTooltipVisible}
                    onHiding={this.onTooltipHiding}
                />
            </div>
        );
    }
}

export default App;

Displayed Tags

Specify the maxDisplayedTags property to limit the number of displayed tags. In this case, when the specified limit is exceeded, the UI component 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 property's value.

jQuery
JavaScript
$(function(){
    const 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
     ],
     // ...
 })
Vue
<template>
    <DxTagBox
        :data-source="products"
        :max-displayed-tags="3"
        :show-multi-tag-only="false"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxTagBox } from 'devextreme-vue/tag-box';

export default {
    components: {
        DxTagBox
    },
    data() {
        return {
            products: [
                'HD Video Player',
                'SuperHD Video Player',
                'SuperPlasma 50',
                'SuperLED 50',
                // ...
            ]
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { TagBox } from 'devextreme-react/tag-box';

const products = [
    'HD Video Player',
    'SuperHD Video Player',
    'SuperPlasma 50',
    'SuperLED 50',
    // ...
];

class App extends React.Component {
    render() {
        return (
            <TagBox
                dataSource={products}
                maxDisplayedTags={3}
                showMultiTagOnly={false}
            />
        );
    }
}

export default App;

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) {
            const selectedItemsLength = args.selectedItems.length;
            const 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) {
        const selectedItemsLength = e.selectedItems.length;
        const totalCount = this.products.length;
        if (selectedItemsLength < totalCount) {
            e.cancel = true;
        } else {
            e.text = "All selected (" + selectedItemsLength + ")";
            e.multiTagElement.classList.add("red");
        }
    }
}
@NgModule({
     imports: [
         // ...
         DxTagBoxModule
     ],
     // ...
 })
Vue
<template>
    <DxTagBox
        :data-source="products"
        :max-displayed-tags="2"
        @multi-tag-preparing="onMultiTagPreparing"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxTagBox } from 'devextreme-vue/tag-box';

export default {
    components: {
        DxTagBox
    },
    data() {
        return {
            products: [
                'HD Video Player',
                'SuperHD Video Player',
                'SuperPlasma 50',
                'SuperLED 50',
                // ...
            ]
        };
    },
    methods: {
        onMultiTagPreparing(args) {
            const selectedItemsLength = args.selectedItems.length;
            const totalCount = this.products.length;
            if (selectedItemsLength < totalCount) {
                args.cancel = true;
            } else {
                args.text = 'All selected (' + selectedItemsLength + ')';
                args.multiTagElement.classList.add('red');
            }
        }
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { TagBox } from 'devextreme-react/tag-box';

const products = [
    'HD Video Player',
    'SuperHD Video Player',
    'SuperPlasma 50',
    'SuperLED 50',
    // ...
];

class App extends React.Component {
    render() {
        return (
            <TagBox
                dataSource={products}
                maxDisplayedTags={2}
                onMultiTagPreparing={this.onMultiTagPreparing}
            />
        );
    }

    onMultiTagPreparing(args) {
        const selectedItemsLength = args.selectedItems.length;
        const totalCount = products.length;
        if (selectedItemsLength < totalCount) {
            args.cancel = true;
        } else {
            args.text = 'All selected (' + selectedItemsLength + ')';
            args.multiTagElement.classList.add('red');
        }
    }
}

export default App;

View Demo