JavaScript/jQuery DropDownBox - Customize the Appearance
You can customize the text field and the drop-down button using the fieldTemplate and dropDownButtonTemplate. To adjust the drop-down field, use the dropDownOptions object that contains properties described in the Popup Configuration section.
JavaScript
CSS
- $(function () {
- const fruits = [
- { id: 1, text: "Apples", image: "images/Apples.svg" },
- { id: 2, text: "Oranges", image: "images/Oranges.svg" },
- { id: 3, text: "Lemons", image: "images/Lemons.svg" },
- { id: 4, text: "Pears", image: "images/Pears.svg" },
- { id: 5, text: "Pineapples", image: "images/Pineapples.svg" }
- ];
- $("#dropDownBoxContainer").dxDropDownBox({
- value: fruits[0],
- dataSource: new DevExpress.data.DataSource({
- store: new DevExpress.data.ArrayStore({ data: fruits, key: "id" }),
- }),
- dropDownOptions: {
- title: "Fruits",
- showTitle: true,
- fullScreen: true,
- showCloseButton: true
- },
- dropDownButtonTemplate: function() {
- return $("<img />").attr("src", "images/icons/custom-dropbutton-icon.svg");
- },
- fieldTemplate: function (value, fieldElement) {
- return $("<div class='custom-item' />").append(
- $("<img />").attr("src", value.image),
- $("<div class='product-name' />").dxTextBox({ value: value.text, readOnly: true })
- );
- },
- contentTemplate: function(e) {
- const list = $("<div>").dxList({
- dataSource: e.component.option("dataSource"),
- selectionMode: "single",
- onSelectionChanged: function(arg) {
- e.component.option("value", arg.addedItems[0]);
- e.component.close();
- }
- });
- return list;
- }
- });
- });
- .custom-item {
- position: relative;
- min-height: 30px;
- }
- .custom-item > img {
- left: 1px;
- margin-top: 3px;
- max-height: 30px;
- width: auto;
- position: absolute;
- }
- .product-name {
- display: inline-block;
- padding-left: 45px;
- text-indent: 0;
- line-height: 30px;
- font-size: 15px;
- width: 100%;
- }
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.