Load select options asynchronously

Tags: #<Tag:0x00007f3440cf87c8>

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?

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)

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)

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.

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:

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