Vue SelectBox - Customize Item Appearance

For a minor customization of SelectBox items, you can define specific fields in their 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() {
    $("#selectBoxContainer").dxSelectBox({
        valueExpr: 'text',
        displayExpr: 'text',
        dataSource: [
            { text: "HD Video Player" },
            { text: "SuperHD Video Player", disabled: true },
            { text: "SuperPlasma 50", visible: false }
        ],
        placeholder: "Select a product..."
    });
});
Angular
TypeScript
HTML
import { DxSelectBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    products =  [
        { text: "HD Video Player" },
        { text: "SuperHD Video Player", disabled: true },
        { text: "SuperPlasma 50", visible: false }
    ];
}
@NgModule({
     imports: [
         // ...
         DxSelectBoxModule
     ],
     // ...
 })
<dx-select-box
    [dataSource]="products"
    valueExpr="text"
    displayExpr="text"
    placeholder="Select a product...">
</dx-select-box>
Vue
App.vue
<template> 
    <DxSelectBox ...
        :data-source="products"
        display-expr="text"
        value-expr="text"
    />
</template>

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

import { DxSelectBox } from 'devextreme-vue/select-box';

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

import SelectBox from 'devextreme-react/select-box';

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

export default function App(props) {
    return (
        <SelectBox ...
            dataSource={products} 
            displayExpr="text"
            valueExpr="text"
        />
    );
}

If you need a more flexible solution, specify itemTemplate.

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

$(function() {
    $("#selectBoxContainer").dxSelectBox({
        dataSource: selectBoxData,
        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-select-box
    [dataSource]="selectBoxData"
    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-select-box>
import { DxSelectBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    selectBoxData = [{
        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: [
         // ...
         DxSelectBoxModule
     ],
     // ...
 })
Vue
App.vue
<template> 
    <DxSelectBox ...
        :data-source="selectBoxData"
        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>
    </DxSelectBox>
</template>

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

import { DxSelectBox } from 'devextreme-vue/select-box';

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

import SelectBox from 'devextreme-react/select-box';

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

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

export default function App(props) {
    return (
        <SelectBox ...
            dataSource={selectBoxData} 
            displayExpr="name"
            valueExpr="id"
            itemRender={renderItem}
        />
    );
}
jQuery

You can also customize individual SelectBox items. Declare them as scripts and reference them in the template property or assign a customization function straight to this property.

HTML
JavaScript
<div id="selectBoxContainer"></div>
<script id="individualTemplate" type="text/html">
    <span>Comment</span>
</script>
$(function() {
    $("#selectBoxContainer").dxSelectBox({
        items: [{ 
            template: function() {
                return $("<span>").text("User");
            }
        }, { 
            template: $("#individualTemplate")
        }]
    });
});
Angular

You can also customize individual SelectBox items. Declare them using the dxItem component.

HTML
TypeScript
<dx-select-box>
    <dxi-item>
        <span>User</span>
    </dxi-item>
    <dxi-item>
        <span>Comment</span>
    </dxi-item>
</dx-select-box>
import { DxSelectBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSelectBoxModule
    ],
    // ...
})
Vue

You can also customize individual SelectBox items. Declare them using the dxItem component.

App.vue
<template>
    <DxSelectBox>
        <DxItem>
            <template #default>
                <span>User</span>
            </template>
        </DxItem>
        <DxItem>
            <template #default>
                <span>Comment</span>
            </template>
        </DxItem>
    </DxSelectBox>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import DxSelectBox, { DxItem } from "devextreme-vue/select-box";

export default {
    components: {
        DxSelectBox,
        DxItem
    }
};
</script>
React

You can also customize individual SelectBox items. Declare them using the dxItem component.

App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { SelectBox, Item } from 'devextreme-react/select-box';

export default function App(props) {
    return (
        <SelectBox>
            <Item>
                <span>User</span>
            </Item>
            <Item>
                <span>Comment</span>
            </Item>
        </SelectBox>
    );
}

Using similar techniques, you can customize the input field of the SelectBox. The template for it should be assigned to the fieldTemplate property. Note that the input field must contain the TextBox UI component.

jQuery
JavaScript
$(function() {
    $("#selectBoxContainer").dxSelectBox({
        dataSource: selectBoxData,
        valueExpr: 'id',
        displayExpr: 'name',
        value: 1,
        fieldTemplate: function(selectedItem, fieldElement) {
            return $("<div />").append(
                $("<img />").attr("src", selectedItem.imgSrc),
                $("<div />").dxTextBox({ value: selectedItem.name })
                            .css("display", "inline-block")
            );
        }
    });
});
Angular
HTML
TypeScript
<dx-select-box
    [dataSource]="selectBoxData"
    valueExpr="id"
    [value]="1"
    displayExpr="name"
    fieldTemplate="inputField">
    <div *dxTemplate="let data of 'inputField'">
        <img ng-src="{{data.imgSrc}}" />
        <dx-text-box style="display:inline-block" 
            [value]="data.name" 
        ></dx-text-box>
    </div>
</dx-select-box>
import { DxSelectBoxModule, DxTextBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    selectBoxData = [
        { id: 1, name: "HD Video Player", imgSrc: "images/products/1-small.png" },
        // ...
    ];
}
@NgModule({
     imports: [
         // ...
         DxSelectBoxModule,
         DxTextBoxModule
     ],
     // ...
 })
Vue
App.vue
<template> 
    <DxSelectBox ...
        :data-source="selectBoxData"
        :value="1"
        display-expr="name"
        value-expr="id"
        field-template="field"
    >
        <template #field='{ data }'>
            <div>
                <img :src="data.imgSrc">
                <DxTextBox
                    :value="data.name"
                    style="display:inline-block"
                />
            </div>
        </template>
    </DxSelectBox>
</template>

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

import { DxSelectBox } from 'devextreme-vue/select-box';
import { DxTextBox } from 'devextreme-vue/text-box';

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

import { SelectBox } from 'devextreme-react/select-box';
import { TextBox } from 'devextreme-react/text-box';

const renderField = (data) => {
    return (
        <div>
            <img src={data.imgSrc} />
                <TextBox style={{display: 'inline-block'}}
                    defaultValue={data.name} />
        </div>
    );
}

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

export default function App(props) {
    return (
        <SelectBox ...
            dataSource={selectBoxData} 
            value={1}
            displayExpr="name"
            valueExpr="id"
            fieldRender={renderField}
        />
    );
}
See Also