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

40 Views Asked by At

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.

screenshot 1 screenshot 2

 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. .

0

There are 0 best solutions below