This page shows how to use and configure dropdown menu with Handsontable:
function getData() {
return [
['', 'Kia', 'Nissan', 'Toyota', 'Honda'],
['2008', 10, 11, 12, 13],
['2009', 20, 11, 14, 13],
['2010', 30, 15, 12, 13]
];
}
var example1 = document.getElementById('example1'),
settings1,
hot1;
settings1 = {
data: getData(),
startRows: 5,
startCols: 5,
minRows: 5,
minCols: 5,
maxRows: 10,
maxCols: 10,
rowHeaders: true,
colHeaders: true, // If you use `dropdownMenu` option you must enable colHeaders
minSpareRows: 1,
dropdownMenu: true
};
hot1 = new Handsontable(example1, settings1);
You can limit options available in the dropdown menu using dropdownMenu option as an array of strings.
List of commands below are common for context menu and for dropdown menu.
A | B | C | D | E | |
|---|---|---|---|---|---|
1 | Kia | Nissan | Toyota | Honda | |
2 | 2008 | 10 | 11 | 12 | 13 |
3 | 2009 | 20 | 11 | 14 | 13 |
4 | 2010 | 30 | 15 | 12 | 13 |
5 |
var example2 = document.getElementById('example2');
var settings2 = {
data: getData(),
startRows: 5,
startCols: 5,
rowHeaders: true,
colHeaders: true, // If you use `dropdownMenu` option you must enable colHeaders
minSpareRows: 1,
dropdownMenu: ['col_left', 'col_right']
};
var hot2 = new Handsontable(example2, settings2);
For greatest configurability, you use dropdownMenu option as a configuration object as described in jQuery contextMenu documentation.
This example shows how to set custom text, how to disable "Remove row" and "Insert row above" for the first row and how to add your own option.
A | B | C | D | E | |
|---|---|---|---|---|---|
1 | Kia | Nissan | Toyota | Honda | |
2 | 2008 | 10 | 11 | 12 | 13 |
3 | 2009 | 20 | 11 | 14 | 13 |
4 | 2010 | 30 | 15 | 12 | 13 |
5 |
var example3 = document.getElementById('example3');
var settings3 = {
data: getData(),
startRows: 5,
startCols: 5,
rowHeaders: true,
colHeaders: true, // If you use `dropdownMenu` option you must enable colHeaders
minSpareRows: 1
};
var hot3 = new Handsontable(example3, settings3);
hot3.updateSettings({
dropdownMenu: {
callback: function (key, options) {
if (key === 'about') {
setTimeout(function () {
// timeout is used to make sure the menu collapsed before alert is shown
alert("This is a dropdown menu with default and custom options mixed");
}, 100);
}
},
items: {
"col_left": {
disabled: function () {
// if first column, disable this option
return this.getSelected() && this.getSelected()[1] === 0;
}
},
"col_right": {},
"hsep1": "---------",
"remove_col": {
name: 'Remove this column, ok?',
disabled: function () {
// if first column, disable this option
return this.getSelected() && this.getSelected()[1] === 0
}
},
"hsep2": "---------",
"about": {name: 'About this menu'}
}
}
})