JavaScript/jQuery TagBox - Customize Item Appearance

For a minor customization of TagBox items, you can define specific fields in item data objects. For example, the following code generates three items: the first is not customized, the second is disabled and the third is hidden.

jQuery
JavaScript
$(function() {
    $("#tagBoxContainer").dxTagBox({
        valueExpr: 'text',
        displayExpr: 'text',
        dataSource: [
            { text: "HD Video Player" },
            { text: "SuperHD Video Player", disabled: true },
            { text: "SuperPlasma 50", visible: false }
        ],
        placeholder: "Select products..."
    });
});
Angular
TypeScript
HTML
import { DxTagBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    products =  [
        { text: "HD Video Player" },
        { text: "SuperHD Video Player", disabled: true },
        { text: "SuperPlasma 50", visible: false }
    ];
}
@NgModule({
     imports: [
         // ...
         DxTagBoxModule
     ],
     // ...
 })
<dx-tag-box
    [dataSource]="products"
    valueExpr="text"
    displayExpr="text"
    placeholder="Select products...">
</dx-tag-box>
Vue
<template>
    <DxTagBox
        :data-source="dataSource"
        value-expr="text"
        display-expr="text"
        placeholder="Select products..."
    />
</template>

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

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

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

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

const dataSource = [
    { text: 'HD Video Player' },
    { text: 'SuperHD Video Player', disabled: true },
    { text: 'SuperPlasma 50', visible: false }
];

class App extends React.Component {
    render() {
        return (
            <TagBox
                dataSource={dataSource}
                valueExpr="text"
                displayExpr="text"
                placeholder="Select products..."
            />
        );
    }
}

export default App;

If you need a more flexible solution, define an itemTemplate.

jQuery
JavaScript
const tagBoxData = [{
    id: 1,
    name: "HD Video Player",
    imgSrc: "images/products/1-small.png"
}, {
    id: 2,
    name: "UltraHD Player",
    imgSrc: "images/products/2-small.png"
},
// ...
];

$(function() {
    $("#tagBoxContainer").dxTagBox({
        dataSource: tagBoxData,
        valueExpr: 'id',
        displayExpr: 'name',
        itemTemplate: function (itemData, itemIndex, itemElement) {
            return $("<div />").append(
                $("<img />").attr("src", itemData.imgSrc),
                $("<p />").text(itemData.name)
                          .css("display", "inline-block")
            );
        }
    });
});
Angular
HTML
TypeScript
<dx-tag-box
    [dataSource]="tagBoxData"
    displayExpr="name"
    valueExpr="id"
    itemTemplate="item">
    <div *dxTemplate="let data of 'item'">
        <img src="{{data.imgSrc}}" />
        <div style="display:inline-block">{{data.name}}</div>
    </div>
</dx-tag-box>
import { DxTagBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    tagBoxData = [{
        id: 1,
        name: "HD Video Player",
        imgSrc: "images/products/1-small.png"
    }, {
        id: 2,
        name: "UltraHD Player",
        imgSrc: "images/products/2-small.png"
    },
    // ...
    ];
}
@NgModule({
     imports: [
         // ...
         DxTagBoxModule
     ],
     // ...
 })
Vue
<template>
    <div>
        <DxTagBox
            :data-source="dataSource"
            display-expr="name"
            value-expr="id"
            item-template="item">
            <template #item="{ data }">
                <div>
                    <img :src="data.imgSrc" />
                    <div style="display:inline-block">{{data.name}}</div>
                </div>
            </template>
        </DxTagBox>
    </div>
</template>

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

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

export default {
    components: {
        DxTagBox
    },
    data() {
        return {
            dataSource: [{
                id: 1,
                name: "HD Video Player",
                imgSrc: "images/products/1-small.png"
            }, {
                id: 2,
                name: "UltraHD Player",
                imgSrc: "images/products/2-small.png"
            }]
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

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

const dataSource = [{
    id: 1,
    name: "HD Video Player",
    imgSrc: "images/products/1-small.png"
}, {
    id: 2,
    name: "UltraHD Player",
    imgSrc: "images/products/2-small.png"
}];

const renderItem = (itemData) => {
    return (
        <div>
            <img src={itemData.imgSrc} />
            <div style={{display: "inline-block"}}>{itemData.name}</div>
        </div>      
    );
};

class App extends React.Component {
    render() {
        return (
            <TagBox
                dataSource={dataSource}
                displayExpr="name"
                valueExpr="id"
                itemRender={renderItem}
            />
        );
    }
}

export default App;
jQuery

You can also customize an individual item in the drop-down list. For this purpose, declare a template for this item as a script and pass its id to the template field.

HTML
JavaScript
<script id="individualTemplate" type="text/html">
    <!-- ... -->
</script>
const tagBoxData = [
    { text: "SuperHD Player"},
    { text: "HD Video Player", template: $("#individualTemplate") },
    // ...
];

Using similar techniques, you can also customize tags of the selected items. The template for them should be assigned to the tagTemplate property.

jQuery
JavaScript
$(function() {
    $("#tagBoxContainer").dxTagBox({
        dataSource: tagBoxData,
        valueExpr: 'id',
        displayExpr: 'name',
        tagTemplate: function (itemData, tagElement) {
            tagElement.append("<p><b>" + itemData.name + "</b> (" + itemData.id + ")</p>");
        }
    });
});
Angular
HTML
TypeScript
<dx-tag-box
    [dataSource]="tagBoxData"
    valueExpr="id"
    displayExpr="name"
    tagTemplate="tagTemplate">
    <div *dxTemplate="let data of 'tagTemplate'">
        <p><b>{{data.name}}</b> ({{data.id}})</p>
    </div>
</dx-tag-box>
import { DxTagBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    tagBoxData = [
        { id: 1, name: "HD Video Player", imgSrc: "images/products/1-small.png" },
        // ...
    ];
}
@NgModule({
     imports: [
         // ...
         DxTagBoxModule
     ],
     // ...
 })
Vue
<template>
    <div>
        <DxTagBox
            :data-source="dataSource"
            value-expr="id"
            display-expr="name"
            tag-template="tag">
            <template #tag="{ data }">
                <p><b>{{data.name}}</b> ({{data.id}})</p>
            </template>
        </DxTagBox>
    </div>
</template>

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

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

export default {
    components: {
        DxTagBox
    },
    data() {
        return {
            dataSource: [
                { id: 1, name: "HD Video Player", imgSrc: "images/products/1-small.png" },
                // ...
            ]
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

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

const dataSource = [
    { id: 1, name: "HD Video Player", imgSrc: "images/products/1-small.png" },
    // ...
];

const renderTag = (tagData) => {
    return (
        <p><b>{tagData.name}</b> ({tagData.id})</p>
    );
};

class App extends React.Component {
    render() {
        return (
            <TagBox
                dataSource={dataSource}
                valueExpr="id"
                displayExpr="name"
                tagRender={renderTag}
            />
        );
    }
}

export default App;
See Also