DevExtreme jQuery - Control the Behavior
By default, the TagBox closes the drop-down list immediately after a user selects an item from it. Therefore, the user has to open the list again if he/she wants to select another item. To enable the user to select multiple items without reopening the list, set the applyValueMode option to "useButtons". In this case, the list is not closed until the user clicks the OK button. To make multiple selection even easier for the user, add selection controls to the TagBox using the showSelectionControls option.
jQuery
$(function() {
$("#tagBoxContainer").dxTagBox({
dataSource: [
"HD Video Player",
"SuperHD Video Player",
"SuperPlasma 50",
// ...
],
applyValueMode: 'useButtons',
showSelectionControls: true
});
});Angular
<dx-tag-box
[dataSource]="tagBoxData"
applyValueMode="useButtons"
[showSelectionControls]="true">
<dx-tag-box>
import { DxTagBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
tagBoxData = [
"HD Video Player",
"SuperHD Video Player",
"SuperPlasma 50",
// ...
];
}
@NgModule({
imports: [
// ...
DxTagBoxModule
],
// ...
})When selected items overflow the input field, they are arranged in several lines. To disable this behavior, set the multiline option to false.
jQuery
$(function() {
$("#tagBoxContainer").dxTagBox({
dataSource: [
"HD Video Player",
"SuperHD Video Player",
"SuperPlasma 50",
// ...
],
multiline: false
});
});Angular
<dx-tag-box
[dataSource]="tagBoxData"
[multiline]="false">
<dx-tag-box>
import { DxTagBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
tagBoxData = [
"HD Video Player",
"SuperHD Video Player",
"SuperPlasma 50",
// ...
];
}
@NgModule({
imports: [
// ...
DxTagBoxModule
],
// ...
})By default, selected items stay in the drop-down list. If they should be hidden after being selected, set the hideSelectedItems option to true.
jQuery
$(function() {
$("#tagBoxContainer").dxTagBox({
dataSource: [
"HD Video Player",
"SuperHD Video Player",
"SuperPlasma 50",
// ...
],
hideSelectedItems: true
});
});Angular
<dx-tag-box
[dataSource]="tagBoxData"
[hideSelectedItems]="true">
<dx-tag-box>
import { DxTagBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
tagBoxData = [
"HD Video Player",
"SuperHD Video Player",
"SuperPlasma 50",
// ...
];
}
@NgModule({
imports: [
// ...
DxTagBoxModule
],
// ...
})The TagBox allows a user to clear selection in one click on the Clear button. To show this button, assign true to the showClearButton option.
jQuery
$(function() {
$("#tagBoxContainer").dxTagBox({
dataSource: [
"HD Video Player",
"SuperHD Video Player",
"SuperPlasma 50",
// ...
],
showClearButton: true
});
});Angular
<dx-tag-box
[dataSource]="tagBoxData"
[showClearButton]="true">
<dx-tag-box>
import { DxTagBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
tagBoxData = [
"HD Video Player",
"SuperHD Video Player",
"SuperPlasma 50",
// ...
];
}
@NgModule({
imports: [
// ...
DxTagBoxModule
],
// ...
})