I tried to use handsontable and want to add custom items to context menu.
There are many tutorials to implement custom menus, but it ignores the default items.
So I added keys of all items, but some of them don't work.
My setting is like follows.
var basicSettings = {
minRows: 1,
minCols: 1,
rowHeaders: false,
colHeaders: false,
hiddenColumns: true,
contextMenu: {
items: {
row_above: {},
row_below: {},
"hsep1": "---------",
col_left: {},
col_right: {},
"hsep2": "---------",
remove_row: {},
remove_col: {},
"hsep3": "---------",
undo: {},
redo: {},
"hsep4": "---------",
make_read_only: {},
"hsep5": "---------",
alignment: {},
"hsep6": "---------",
copy: {},
cut: {},
"paste": {
name: 'Paste',
callback: function (key, option) {
this.copyPaste.triggerPaste();
}
},
"hsep7": "---------",
mergeCells: {
name: "Merge"
},
"hsep8": "---------",
// Custom menu item to set color of cells
set_color: {
key: "color",
name: "Color",
"submenu": {
"items": [
{
key: "color:1",
"name": "Black",
callback: function(key, options) {
for (var i = options[0].start.row; i <= options[0].end.row; i ++){
for (var j = options[0].start.col; j <= options[0].end.col; j ++){
this.getCell(i, j).className = "color-black";
}
}
}
}, {
key: "color:2",
"name": "White",
callback: function(key, options) {
for (var i = options[0].start.row; i <= options[0].end.row; i ++){
for (var j = options[0].start.col; j <= options[0].end.col; j ++){
$(this.getCell(i, j)).removeClass("color-*").addClass("color-white");
}
}
this.render();
}
}, {
key: "color:3",
"name": "Red",
callback: function(key, options) {
for (var i = options[0].start.row; i <= options[0].end.row; i ++){
for (var j = options[0].start.col; j <= options[0].end.col; j ++){
this.getCell(i, j).style.backgroundColor = "red";
}
}
this.render();
}
}
]
}
}
}
},
manualRowResize: true,
manualColumnResize: true,
contextMenuCopyPaste: {
swfPath: '/bower_components/zeroclipboard/dist/ZeroClipboard.swf'
},
copyPaste: true,
mergeCells: true,
search: true,
stretchH: 'all',
autoColumnSize: {useHeaders: true},
autoRowSize: {syncLimit: 300},
width: 1000,
height: window.innerHeight - 100,
licenseKey: "xxxxx-xxxxx-xxxxx-xxxxx-xxxxx"
};
Menu looks like this.
Question 1:
Is there any way to add custom item with all the default menu items? If so, I don't need answers to Question 3 and Question 4.
Question 2:
The most important part that let me ask this question is custom menu, that is "set_color". After clicking "Black" or "Red", it turns into that color, but after I change value of a cell, it turns back. How can I prevent the cells from turning their background color back?
Questions 3:
I want additional custom item besides all feature enabled. But I can't find proper key for "Merge" item. The current "Merge" function works so strangely. How to make the function works correctly?
Question 4:
I tried https://github.com/handsontable/handsontable/issues/2853 to implement paste functionality, but I see this error.
Uncaught TypeError: Cannot read property 'triggerPaste' of undefined
Please help me with those handsontable usage. Thanks in advance.
from How to add custom items with default items in Context Menu of handsontable
No comments:
Post a Comment