The outcome is javascript error in handsontable code when I hoover over dynamic submenu.
Whats wrong?
My simple test script:
<!DOCTYPE html>
<html>
<head>
<title>Handsontable Dynamic Submenu Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" />
<style>
#example-grid {
width: 800px;
height: 300px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="example-grid"></div>
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const container = document.getElementById('example-grid');
const hot = new Handsontable(container, {
data: [
['A1', 'B1', 'C1'],
['A2', 'B2', 'C2'],
['A3', 'B3', 'C3']
],
colHeaders: true,
rowHeaders: true,
contextMenu: {
items: {
"row_above": {}, // Default menu item - just to have something basic
"col_left": {}, // Another default item
"dynamic_submenu": { // Dynamic Submenu Item
type: 'submenu',
name: 'Dynamic Columns',
submenu: function() {
console.log("ENTERING DYNAMIC SUBMENU FUNCTION!"); // Check if function is called
const columnList = [];
// Dynamically generate submenu items based on column headers
for (let i = 0; i < hot.countCols(); i++) {
columnList.push('Column ' + hot.colToChar(i)); // Example: Column A, Column B, etc.
}
return {
items: columnList.map(colName => ({ // Map to array of item objects (optional, but cleaner)
name: colName,
callback: function() {
alert('You clicked: ' + colName); // Example action
}
}))
};
}
}
}
}
});
});
</script>
</body>
</html>