Load select options asynchronously

Tags: #<Tag:0x00007f8b1cc3ffb0>
#1

Hi there!

I’m using the default SelectEditor on some columns, and I have to fetch the select options from an api. I didn’t found any easy way to make that http call after the table is created, and update my columns settings after that. I have to fetch all my options before creating my columns setting…

I would like to be able to fetch the options whenever a user actually edit such a cell. I guess using the prepare hook from the editor. But I have no way to update my column.selectOptions easily from that response in the editor.

Any idea here?

#2

Hi @florent.ct

Let me check if that is possible.
Can you tell me what version of Handsontable do you use and if you use any wrappers (Angular, React, Vue)

#3

Of course!

Handsontable 7.4.2
Vue/handsontable: 4.1.1

I may upgrade to 8.0.0 if a possible solution is available only for that version.
(The vue wrapper was broken until recently so I didn’t upgraded yet)

#4

Hi @florent.ct

I just got a demo from our Support Engineer. I hope that it will make you a bit closer to the end goal https://codesandbox.io/s/add-fetched-data-to-select-cell-editor-forked-61yh6
If you’d need anything more than that please let me know.

#5

Hi Aleksandra!

Thanks for your reply :slight_smile:
I kind of managed to do what I wanted!

I’m using the afterSelection hook to run my asynchronous calls to get the select options, and then I update the columns settings using updateSettings methods (well, actually it updates automatically with the vuejs settings property).

I thought updating all the columns settings because one column have new select options would be too slow to refresh but it’s actually pretty transparent.

Have a great day! :slight_smile:

#6

Great news :slight_smile: @florent.ct !
Thank you for sharing the update.

#7