JavaScript/jQuery DropDownBox - fieldAddons
Specifies DropDownBox input field addons.
Type:
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 ... >
<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
<template>
<DxDropDownBox ... >
<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>
<script setup lang="ts">
import { DxDropDownBox, DxFieldAddons } from 'devextreme-vue/drop-down-box';
</script>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>
);
}Feedback