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
],
// ...
})Feedback