Custom formatting for dropdown source

Tags: #<Tag:0x00007efc647497a0> #<Tag:0x00007efc64749660>
#1

I would like to know if it is possible to have custom formatting for source values in a dropdown.
For example let’s say I want to show icons circle, triangle and x-mark in the dropdown list but the source i.e. the value to be 1,2,3 respectively.

I looked at various articles and source but couldn’t find anything solid. I did find an article from 8 years ago about key-value pairs but it concluded with that not being supported. Ref: Customize the dropdown source values

I did try allowHtml: true and directly passed the font-awesome icon. however the other things get rendered useless, like having to put logic for passing values to backend and filtering.

I’d like to know if there is any way this can be made possible.

Image: What I want it to look like.
image

#2

Hi @param556

We don’t have any examples showing such a solution, but we have a demo with key-value dropdown: https://jsfiddle.net/9ta6f7e8/

It’s more of a suggestion how it can be implemented so feel free to modify it to your needs, but I think that it can be a good starting point to create a solution you are looking for.

#3

Hi @adrian.szymanski
Sorry for the late reply, I will check into the code you sent and see if it works for my case.

Regardless of whether or not I get it to work, I will post the result here.
Thanks!