JavaScript/jQuery SelectBox - fieldAddons
Specifies SelectBox input field addons.
Type:
Default Value: null
Field addons are custom markup containers that you can add to either side of the SelectBox input field. The component arranges visual elements in the following order: beforeTemplate, SelectBox input, afterTemplate.
jQuery
index.js
$('#select-box-container').dxSelectBox({
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-select-box ... >
<dxo-select-box-field-addons
beforeTemplate="beforeSelectBox"
afterTemplate="afterSelectBox"
></dxo-select-box-field-addons>
<div *dxTemplate="let data of 'beforeSelectBox'">
<i class="dx-icon-chevronprev"></i>
</div>
<div *dxTemplate="let data of 'afterSelectBox'">
<i class="dx-icon-chevronnext"></i>
</div>
</dx-select-box>Vue
App.vue
<script setup lang="ts">
import { DxSelectBox, DxFieldAddons } from 'devextreme-vue/select-box';
</script>
<template>
<DxSelectBox ... >
<DxFieldAddons
before-template="beforeSelectBox"
after-template="afterSelectBox"
/>
<template #beforeSelectBox="{ data }">
<i class="dx-icon-chevronprev"></i>
</template>
<template #after="{ data }">
<i class="dx-icon-chevronnext"></i>
</template>
</DxSelectBox>
</template>React
App.tsx
import { SelectBox, FieldAddons } from 'devextreme-react/select-box';
function beforeSelectBoxRender(data) {
return (
<i class="dx-icon-chevronprev"></i>
);
}
function afterSelectBoxRender(data) {
return (
<i class="dx-icon-chevronnext"></i>
);
}
function App() {
return (
<SelectBox ... >
<FieldAddons
beforeRender={beforeSelectBoxRender}
afterRender={afterSelectBoxRender}
/>
</SelectBox>
);
}Feedback