All docs
V20.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

jQuery TagBox - 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 property 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 property.

jQuery
JavaScript
$(function() {
    $("#tagBoxContainer").dxTagBox({
        dataSource: [
            "HD Video Player",
            "SuperHD Video Player",
            "SuperPlasma 50",
            // ...
        ],
        applyValueMode: 'useButtons',
        showSelectionControls: true
    });
});
Angular
HTML
TypeScript
<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
     ],
     // ...
 })
Vue
<template>
    <DxTagBox
        :data-source="dataSource"
        :show-selection-controls="true"
        apply-value-mode="useButtons"
    />
</template>

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

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

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

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

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

class App extends React.Component {
    render() {
        return (
            <TagBox
                dataSource={dataSource}
                showSelectionControls={true}
                applyValueMode="useButtons"
            />
        );
    }
}

export default App;

When selected items overflow the input field, they are arranged in several lines. To disable this behavior, set the multiline property to false.

jQuery
JavaScript
$(function() {
    $("#tagBoxContainer").dxTagBox({
        dataSource: [
            "HD Video Player",
            "SuperHD Video Player",
            "SuperPlasma 50",
            // ...
        ],
        multiline: false
    });
});
Angular
HTML
TypeScript
<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
     ],
     // ...
 })
Vue
<template>
    <DxTagBox
        :data-source="dataSource"
        :multiline="false"
    />
</template>

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

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

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

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

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

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

export default App;

By default, selected items stay in the drop-down list. If they should be hidden after being selected, set the hideSelectedItems property to true.

jQuery
JavaScript
$(function() {
    $("#tagBoxContainer").dxTagBox({
        dataSource: [
            "HD Video Player",
            "SuperHD Video Player",
            "SuperPlasma 50",
            // ...
        ],
        hideSelectedItems: true
    });
});
Angular
HTML
TypeScript
<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
     ],
     // ...
 })
Vue
<template>
    <DxTagBox
        :data-source="dataSource"
        :hide-selected-items="true"
    />
</template>

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

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

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

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

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

class App extends React.Component {
    render() {
        return (
            <TagBox
                dataSource={dataSource}
                hideSelectedItems={true}
            />
        );
    }
}

export default App;

The TagBox allows a user to clear selection in one click on the Clear button. To show this button, assign true to the showClearButton property.

jQuery
JavaScript
$(function() {
    $("#tagBoxContainer").dxTagBox({
        dataSource: [
            "HD Video Player",
            "SuperHD Video Player",
            "SuperPlasma 50",
            // ...
        ],
        showClearButton: true
    });
});
Angular
HTML
TypeScript
<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
     ],
     // ...
 })
Vue
<template>
    <DxTagBox
        :data-source="dataSource"
        :show-clear-button="true"
    />
</template>

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

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

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

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

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

class App extends React.Component {
    render() {
        return (
            <TagBox
                dataSource={dataSource}
                showClearButton={true}
            />
        );
    }
}

export default App;
See Also