Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Your search did not match any results.
Tag Box

Overview

Documentation

The TagBox UI component is an editor that allows an end user to select multiple items from a drop-down list.

Copy to CodeSandBox
Apply
Reset
<div> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Default mode</div> <div class="dx-field-value"> <dx-tag-box [items]="simpleProducts"></dx-tag-box> </div> </div> <div class="dx-field"> <div class="dx-field-label">Search mode</div> <div class="dx-field-value"> <dx-tag-box [items]="simpleProducts" [searchEnabled]="true"> </dx-tag-box> </div> </div> <div class="dx-field"> <div class="dx-field-label">Batch selection</div> <div class="dx-field-value"> <dx-tag-box [items]="simpleProducts" [showSelectionControls]="true" applyValueMode="useButtons"> </dx-tag-box> </div> </div> <div class="dx-field"> <div class="dx-field-label">Hide selected items</div> <div class="dx-field-value"> <dx-tag-box [items]="simpleProducts" [hideSelectedItems]="true"> </dx-tag-box> </div> </div> <div class="dx-field"> <div class="dx-field-label">Single line mode</div> <div class="dx-field-value"> <dx-tag-box [items]="simpleProducts" [multiline]="false"> </dx-tag-box> </div> </div> <div class="dx-field"> <div class="dx-field-label">Add custom items</div> <div class="dx-field-value"> <dx-tag-box [items]="editableProducts" [acceptCustomValue]="true" (onCustomItemCreating)="onCustomItemCreating($event)"> </dx-tag-box> </div> </div> <div class="dx-field"> <div class="dx-field-label">With custom placeholder</div> <div class="dx-field-value"> <dx-tag-box [items]="simpleProducts" placeholder="Choose Product..."> </dx-tag-box> </div> </div> <div class="dx-field"> <div class="dx-field-label">Disabled</div> <div class="dx-field-value"> <dx-tag-box [items]="simpleProducts" [value]="[simpleProducts[0]]" [disabled]="true"> </dx-tag-box> </div> </div> <div class="dx-field"> <div class="dx-field-label">Data source</div> <div class="dx-field-value"> <dx-tag-box [dataSource]="dataSource" displayExpr="Name" valueExpr="Id"> </dx-tag-box> </div> </div> <div class="dx-field"> <div class="dx-field-label">Custom template</div> <div class="dx-field-value"> <dx-tag-box [dataSource]="dataSource" displayExpr="Name" valueExpr="Id" itemTemplate="customItem"> <div *dxTemplate="let product of 'customItem'"> <div class="custom-item"> <img [src]="product.ImageSrc"/> <div class="product-name"> {{product.Name}} </div> </div> </div> </dx-tag-box> </div> </div> </div> </div>
import { Component, NgModule, enableProdMode } from '@angular/core'; import { BrowserModule } from "@angular/platform-browser"; import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; import { DxTagBoxModule, DxTemplateModule } from "devextreme-angular"; import ArrayStore from "devextreme/data/array_store"; import { Service, Product } from './app.service'; if(!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', providers: [Service], templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'] }) export class AppComponent { simpleProducts: string[]; editableProducts: string[]; dataSource: any; constructor(service: Service) { this.dataSource = new ArrayStore({ data: service.getProducts(), key: "Id" }); this.simpleProducts = service.getSimpleProducts(); this.editableProducts = this.simpleProducts.slice(); } onCustomItemCreating(args) { let newValue = args.text; this.editableProducts.unshift(newValue); args.customItem = newValue; } } @NgModule({ imports: [ BrowserModule, DxTemplateModule, DxTagBoxModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
body .custom-item { padding-left: 7px; padding-right: 7px; } ::ng-deep .custom-item > img { height: 30px; width: 40px; float: left; margin-top: 2px; } ::ng-deep .custom-item > div.product-name { margin-left: 40px; line-height: 34px; font-size: 14px; } body .custom-item input { background-color: transparent; } body .dx-popup-content .custom-item { padding-top: 7px; padding-bottom: 8px; } ::ng-deep .dx-popup-content .custom-item > div { padding-left: 8px; text-indent: 0; text-overflow: ellipsis; overflow: hidden; }
import { Injectable } from '@angular/core'; export class Product { Id: number; Name: string; Price: number; Current_Inventory: number; Backorder: number; Manufacturing: number; Category: string; ImageSrc: string; } let simpleProducts = [ "HD Video Player", "SuperHD Video Player", "SuperPlasma 50", "SuperLED 50", "SuperLED 42", "SuperLCD 55", "SuperLCD 42", "SuperPlasma 65", "SuperLCD 70", "Projector Plus", "Projector PlusHT", "ExcelRemote IR", "ExcelRemote Bluetooth", "ExcelRemote IP" ]; let products: Product[] = [{ Id: 1, Name: "HD Video Player", Price: 330, Current_Inventory: 225, Backorder: 0, Manufacturing: 10, Category: "Video Players", ImageSrc: "../../../../images/products/1.png" }, { Id: 2, Name: "SuperHD Video Player", Price: 400, Current_Inventory: 150, Backorder: 0, Manufacturing: 25, Category: "Video Players", ImageSrc: "../../../../images/products/2.png" }, { Id: 3, Name: "SuperPlasma 50", Price: 2400, Current_Inventory: 0, Backorder: 0, Manufacturing: 0, Category: "Televisions", ImageSrc: "../../../../images/products/3.png" }, { Id: 4, Name: "SuperLED 50", Price: 1600, Current_Inventory: 77, Backorder: 0, Manufacturing: 55, Category: "Televisions", ImageSrc: "../../../../images/products/4.png" }, { Id: 5, Name: "SuperLED 42", Price: 1450, Current_Inventory: 445, Backorder: 0, Manufacturing: 0, Category: "Televisions", ImageSrc: "../../../../images/products/5.png" }, { Id: 6, Name: "SuperLCD 55", Price: 1350, Current_Inventory: 345, Backorder: 0, Manufacturing: 5, Category: "Televisions", ImageSrc: "../../../../images/products/6.png" }, { Id: 7, Name: "SuperLCD 42", Price: 1200, Current_Inventory: 210, Backorder: 0, Manufacturing: 20, Category: "Televisions", ImageSrc: "../../../../images/products/7.png" }, { Id: 8, Name: "SuperPlasma 65", Price: 3500, Current_Inventory: 0, Backorder: 0, Manufacturing: 0, Category: "Televisions", ImageSrc: "../../../../images/products/8.png" }, { Id: 9, Name: "SuperLCD 70", Price: 4000, Current_Inventory: 95, Backorder: 0, Manufacturing: 5, Category: "Televisions", ImageSrc: "../../../../images/products/9.png" }, { Id: 10, Name: "DesktopLED 21", Price: 175, Current_Inventory: null, Backorder: 425, Manufacturing: 75, Category: "Monitors", ImageSrc: "../../../../images/products/10.png" }, { Id: 12, Name: "DesktopLCD 21", Price: 170, Current_Inventory: 210, Backorder: 0, Manufacturing: 60, Category: "Monitors", ImageSrc: "../../../../images/products/12.png" }, { Id: 13, Name: "DesktopLCD 19", Price: 160, Current_Inventory: 150, Backorder: 0, Manufacturing: 210, Category: "Monitors", ImageSrc: "../../../../images/products/13.png" }, { Id: 14, Name: "Projector Plus", Price: 550, Current_Inventory: null, Backorder: 55, Manufacturing: 10, Category: "Projectors", ImageSrc: "../../../../images/products/14.png" }, { Id: 15, Name: "Projector PlusHD", Price: 750, Current_Inventory: 110, Backorder: 0, Manufacturing: 90, Category: "Projectors", ImageSrc: "../../../../images/products/15.png" }, { Id: 16, Name: "Projector PlusHT", Price: 1050, Current_Inventory: 0, Backorder: 75, Manufacturing: 57, Category: "Projectors", ImageSrc: "../../../../images/products/16.png" }, { Id: 17, Name: "ExcelRemote IR", Price: 150, Current_Inventory: 650, Backorder: 0, Manufacturing: 190, Category: "Automation", ImageSrc: "../../../../images/products/17.png" }, { Id: 18, Name: "ExcelRemote Bluetooth", Price: 180, Current_Inventory: 310, Backorder: 0, Manufacturing: 0, Category: "Automation", ImageSrc: "../../../../images/products/18.png" }, { Id: 19, Name: "ExcelRemote IP", Price: 200, Current_Inventory: 0, Backorder: 325, Manufacturing: 225, Category: "Automation", ImageSrc: "../../../../images/products/19.png" } ]; @Injectable() export class Service { getProducts(): Product[] { return products; } getSimpleProducts(): string[] { return simpleProducts; } }
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ System.config({ transpiler: 'ts', typescriptOptions: { module: "system", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" }, 'devextreme/localization.js': { "esModule": true } }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js', 'typescript': 'npm:typescript@3.5.3/lib/typescript.js', '@angular': 'npm:@angular', 'tslib': 'npm:tslib@2.1.0/tslib.js', 'rxjs': 'npm:rxjs@6.4.0', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.25.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@20.2.5', 'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@0.9.8/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.0.11', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.18', 'devextreme-angular': 'npm:devextreme-angular@20.2.5', 'preact': 'npm:preact@10.5.11/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.11/hooks/dist/hooks.js' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, packageConfigPaths: [ "npm:@angular/*/package.json", "npm:@angular/common/*/package.json", "npm:rxjs/package.json", "npm:rxjs/operators/package.json", "npm:devextreme-angular/*/package.json", "npm:devextreme-angular/ui/*/package.json", "npm:devextreme-angular/package.json", "npm:devexpress-diagram/package.json", "npm:devexpress-gantt/package.json", ] });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.10.2/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import('app').catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>