React DropDownBox - fieldAddons

Specifies DropDownBox input field addons.

Selector: FieldAddons
Type:

FieldAddons

Default Value: null

Field addons are custom markup containers that you can add to either side of the DropDownBox input field. The component arranges visual elements in the following order: beforeTemplate, DropDownBox input, afterTemplate.

jQuery
index.js
$('#drop-down-box-container').dxDropDownBox({
    fieldAddons: {
        beforeTemplate(data, element) {
            element.append(
                $('<i>').addClass('dx-icon-chevronprev'),
            );
        },
        afterTemplate(data, element) {
            element.append(
                $('<i>').addClass('dx-icon-chevronnext'),
            );
        },
    },
})
Angular
app.component.html
<dx-drop-down-box
    [fieldAddons]="fieldAddons"
>
    <dxo-drop-down-box-field-addons
        beforeTemplate="beforeDropDownBox"
        afterTemplate="afterDropDownBox"
    ></dxo-drop-down-box-field-addons>
    <div *dxTemplate="let data of 'beforeDropDownBox'">
        <i class="dx-icon-chevronprev"></i>
    </div>
    <div *dxTemplate="let data of 'afterDropDownBox'">
        <i class="dx-icon-chevronnext"></i>
    </div>
</dx-drop-down-box>
Vue
App.vue
<script setup lang="ts">
import { DxDropDownBox, DxFieldAddons } from 'devextreme-vue/drop-down-box';

</script>

<template>
    <DxDropDownBox
        :field-addons="fieldAddons"
    >
        <DxFieldAddons
            before-template="beforeDropDownBox"
            after-template="afterDropDownBox"
        />
        <template #beforeDropDownBox="{ data }">
            <i class="dx-icon-chevronprev"></i>
        </template>
        <template #after="{ data }">
            <i class="dx-icon-chevronnext"></i>
        </template>
    </DxDropDownBox>
</template>
React
App.tsx
import { DropDownBox, FieldAddons } from 'devextreme-react/drop-down-box';

function beforeDropDownBoxRender(data) {
    return (
        <i class="dx-icon-chevronprev"></i>
    );
}

function afterDropDownBoxRender(data) {
    return (
        <i class="dx-icon-chevronnext"></i>
    );
}

function App() {
    return (
        <DropDownBox>
            <FieldAddons
                beforeRender={beforeDropDownBoxRender}
                afterRender={afterDropDownBoxRender}
            />
        </DropDownBox>
    );
}

afterComponent

An alias for the afterTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

afterRender

An alias for the afterTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

afterTemplate

A custom markup that displays content to the right of the input field.

Type:

template

Template Data:

Object

Data of the selected editor item.

beforeComponent

An alias for the beforeTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

beforeRender

An alias for the beforeTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

beforeTemplate

A custom markup that displays content to the left of the input field.

Type:

template

Template Data:

Object

Data of the selected editor item.