Hi,
I have an issue with dropdown behaviour in handsontable: Sometimes I can’t select an option, this happens especially often when there already is a value in the field.
I fetch the dropdown options via ajax and use the following code to update the table
function updateDropdownOptions(table, columnName, options) {
const currentColumns = table.getSettings().columns;
const newColumns = currentColumns.map((col, idx) => {
if (col.data === columnName) {
return {
...col,
type: 'dropdown',
source: options
};
}
return col;
});
table.updateSettings({
columns: newColumns
});
}
Hi @handsontable8
Could you please share the details about the system and browser type/version and specify if you are also able to replicate the issue using our official dropdown cell type example at Dropdown cell type - JavaScript Data Grid | Handsontable or it happens only with the use of the mentioned updateDropdownOptions() method?
If it happens only when updateDropdownOptions() method is used we would need to ask for a demo with your current setup (of course data can be altered).
ps. did you try to pass the source to the dropdown via ajax or is that method called within beforeChange/afterChange hooks?
Hi,
sorry I made a mistake in my initial post.
The event order is as following:
- The document listens to the ‘hotDataChanged’ event.
- When the event is fired and the row is ‘manufacturer’ an AJAX call is made
- On resolve, the AJAX call calls the ‘updateCellDropdownOptions’ not the ‘updateDropdownOptions’ function
This is the ‘updateCellDropdownOptions’ function
function updateCellDropdownOptions(tableData, row, table, colName, data) {
const columns = table.getSettings().columns;
const colIndex = columns.findIndex(col => col.data === colName);
table.setCellMeta(row, colIndex, 'type', 'dropdown');
table.setCellMeta(row, colIndex, 'source', data);
table.render();
}
The ‘updateDropdownOptions’ works as expected, the issue occurs with the ‘updateCellDropdownOptions’ function.
Your example works as well. The issue occurs on MacOS and Fedora, both Firefox and Chrome.
The method itself does not seem to be incorrect. I recommend checking what getCellMeta() is before you execute the setCellMeta() - maybe the function needs a ~100ms delay to run (for. example it is called when the cell validator is called so they collide).
Handsontable is behaving really strangely in this case
table.setCellMeta(row, colIndex, 'source', data);
This adds a working dropdown menu, however with the issues as seen above in the gif.
table.setCellMetaObject(row, colIndex, {source: data})
This doesn’t work at all
table.getCellMeta(row, colIndex).source.push(...data)
This makes a functioning Dropdown menu, however all Dropdowns for this col have the same entries.
I also tried adding setTimeout but this didn’t resolve the issue either.
The getCellMeta() method is a getter - it cannot set cell meta - it only reads it.
The setCellMeta method needs the render() to be applies to the table visually. It is used to pass a single cell meta detail.
Then setCellMetaObject is also a setter as setCellMeta() but it does not need an additional render() call. Here’s a demo Handsontable example - JSFiddle - Code Playground (I can see that the description of it in the documentation should be improved so I created an internal task to do it).
This however doesn’t fix my issue. setCellMeta should also correctly set the source which it apparently doesn’t.
However I found the following workaround
function updateCellDropdownOptions(tableData, row, table, colName, data) {
const columns = table.getSettings().columns;
const colIndex = columns.findIndex(col => col.data === colName);
// Get current cell settings array or initialize if not present
const currentCellSettings = table.getSettings().cell || [];
// Remove any existing settings for this cell
const filteredCellSettings = currentCellSettings.filter(cell => !(cell.row === row && cell.col === colIndex));
// Add the new settings for this cell
filteredCellSettings.push({
row: row,
col: colIndex,
type: 'dropdown',
source: data
})
table.updateSettings({
cell: filteredCellSettings
})
table.render()
}
Ok, so it is like cell dependencies then. Did you see this article Expand Your App with Cell Dependencies and the demo at Select-dependent cells section?