I received a dynamic data array through an ajax call:
data=[ // values are subject to change
['Alex', '16', ['2024-01-01,50000', '2024-03-01,20000', '2024-05-01,30000']],
['Bob', '21', ['2022-02-01,50000', '2022-03-01,10000']],
['Jack', '20', ['2023-03-01,50000', '2023-04-01,60000', '2023-05-01,50000']],
['John', '18', ['2020-04-01,20000', '2020-05-01,50000', '2020-06-01,30000', '2020-07-01,50000']],
];
I am looking to create a dropdown for the third column that represents dates and amounts in each option using basic JavaScript.
While it would be simple if the data was static, since it is fetched dynamically via ajax, I cannot hardcode the source property of the dropdown menu.
This involves initialization with plain JavaScript Handsontable.
Any assistance on this matter would be highly appreciated.
I have implemented a getSource function with query and callback parameters in the source attribute like so:
function getSource(query, callback) {
var selectedRow = hotInstance.getSelected()[0][0];
var options = data[selectedRow][2];
callback(options);
}
However, I encountered an issue where selecting an option from the dropdown update its content. For instance, when choosing an option (let's say '2024-03-01,20000') from the first row dropdown, upon reopening the dropdown, the displayed items show '2024-03-01' as the first entry and '20000' as the second instead of displaying all three options: '2024-01-01,50000', '2024-03-01,20000', '2024-05-01,30000'.