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
$(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
<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
$(function(){ var products = [ "HD Video Player", "SuperHD Video Player", "SuperPlasma 50", "SuperLED 50", // ... ]; $("#tagBoxContainer").dxTagBox({ dataSource: products, maxDisplayedTags: 3, showMultiTagOnly: false }); });
Angular
<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
$(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
<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 ], // ... })
If you have technical questions, please create a support ticket in the DevExpress Support Center.