Vue 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
$(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
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
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
<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.
<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
$(function() { $("#tagBoxContainer").dxTagBox({ dataSource: tagBoxData, valueExpr: 'id', displayExpr: 'name', tagTemplate: function (itemData, tagElement) { tagElement.append("<p><b>" + itemData.name + "</b> (" + itemData.id + ")</p>"); } }); });
Angular
<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
If you have technical questions, please create a support ticket in the DevExpress Support Center.