How can i create a dynamic dropdown/autocomplete using Handsontable and laravel

Tags: #<Tag:0x00007efc6a39f950> #<Tag:0x00007efc6a39f810>
#1

I am creating a bulk edit/create page using Laravel. There is a column named “platform” where I select a platform from the database. As soon as I select a platform for a particular row, I want the options in the second column to be updated, and the user IDs connected to the platform_id should be displayed. However, I am facing a problem where, when I select a platform for one row, the sources for all rows in the second column are getting updated and becoming the same.

screenshopt1
screenshopt2

   `hot.addHook('afterOnCellMouseDown', function (event, coords, TD) {
                if (coords.col === 0) { // Product column
                    var selectedPlatformName = hot.getDataAtCell(coords.row, 0);
                    var selectedPlatform = platforms.find(platform => platform.name === selectedPlatformName);

                    if (selectedPlatform) {
                        var platformUsers = selectedPlatform.users || [];
                        console.log(platformUsers.map(platformUser => platformUser.name).flat());
                        hot.updateSettings({
                            columns: [
                                { type: 'autocomplete', source: platforms.map(platform => platform.name) },
                                { type: 'dropdown', source: platformUsers.map(platformUser => platformUser.name) },
                                { type: 'dropdown', source: [] }, // Color column
                            ]
                        });
                        hot.setDataAtCell(coords.row, 1, ''); // Clear the variant cell when selecting a new product
                    }
                }
            });`

I want that when data in column 1 of a row changes, the options in column 2 should be related to row 1. Similarly, if data in column 2 of row 2 changes, the options in column 2 should be related to row 2. Additionally, if there are no duplicate options across all rows in column 2.

#2

Hi @helloronakgiriraj

As I understand, the change should happen when a user chooses an option (they click an option from a dropdown, and the editor is closed), if so, you can use our example from the blog.

Here https://handsontable.com/blog/expand-your-app-with-cell-dependencies at the Select-dependent cells paragraph we have an example where on a change of one dropdown value, we replace a source for another one. Underneath we use the beforeChange hook to proceed with this task.

If that, however, won’t be enough please let me know.

#3