Custom formatting for dropdown source

Getting help Questions
,
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: Handsontable is a JavaScript data grid that looks and feels like a spreadsheet - Available for React, Angular, and Vue

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!

4

Hey @adrian.szymanski,
Thanks for the demo, I got it to work with the code you provided (with few changes according to the requirement).
However, the requirements changed and we ended up not using this approach. But it worked, thanks again for the help.

5

Hi @param556

Of, course, I understand. Thank you for the update. I will close this topic in that case.

1 Like