Class: ContextMenu

Sheets.ContextMenu.ContextMenu

Table of contents

Constructors

• constructor

Properties

• menuData
• menuView

Methods

• onOpenMenu

Constructors

constructor

• new ContextMenu()

Represents ContextMenu

Properties

menuData

• menuData: IMenuItemData[]

Represents the build-in menuData

property [name] - Represent context menu item's identify.

property [text] - Represent the text to be shown,if this context menu item is a group,text will be shown as DOM element's title.

property {string|Function} [command] - Represent a command name,commandManager will use this as index to find this command,if this command exist,then execute it.

property [disable] - Represent this context menu item is disabled under current condition, default value is false.

property [iconClass] - Represent this context menu item's icon,it is a class name.

property [group] - Represent this context menu item is a group menu item and this property's value should be it's group header's name.

property {Object[]} [subMenu] - Represent this context menu item has sub menu.

property [type] - Represent a context menu's type.

property [workArea] - Represent this context menu item's should be shown on what area,value can be a collection of conditions,separate by whitespace. include: "outline","rowHeader","colHeader","corner","slicer","chart","shape","table","vpWithoutTb","pivotPageFilter","pivotTopLeft","pivotEmptyLabel","pivotHeader","pivotGrandTotal","pivotContent","pivotTable".

menuView

• menuView: MenuView

Represents the build-in menuView, could be replaced for customize

example

var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'));
var colors = ['rgb(255,255,255)', 'rgb(0,255,255)', 'rgb(255,0,255)', 'rgb(255,255,0)', 'rgb(255,0,0)', 'rgb(0,255,0)', 'rgb(0,0,255)', 'rgb(0,0,0)'];
function createColorpicker() {
    var colorPicker = document.createElement('div');
    colorPicker.style.width = '100%';
    colorPicker.style.backgroundColor = 'white';
    for (var j = 0; j < 8; j++) {
        var colorDom = document.createElement("div");
        colorDom.style.width = "14px";
        colorDom.style.height = "14px";
        colorDom.style.margin = "0 0 0 6px";
        colorDom.style.display = "inline-block";
        colorDom.style.border = "solid 1px #333333";
        colorDom.style.verticalAlign = "top";
        colorDom.style.backgroundColor = colors[j];
        colorPicker.appendChild(colorDom);
    }
    return colorPicker;
}
// let spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'));
let selectWithABackgroundColor = {
    text: "Select Color",
    name: "selectColorWithBg",
    workArea: "viewport",
    subMenu: [{
        name: "selectColorPicker",
        command: "selectWithBg"
    }]
};
spread.contextMenu.menuData.push(selectWithABackgroundColor);
let selectWithABackgroundColorCommand = {
    canUndo: false,
    execute: function(spread, options) {
        if (options.commandOptions) {
            var style = new GC.Spread.Sheets.Style();
            style.name = 'style1';
            style.backColor = options.commandOptions;
            var sheet = spread.getActiveSheet();
            sheet.suspendPaint();
            var selections = sheet.getSelections();
            var selectionIndex = 0
              , selectionCount = selections.length;
            for (; selectionIndex < selectionCount; selectionIndex++) {
                var selection = selections[selectionIndex];
                for (var i = selection.row; i < (selection.row + selection.rowCount); i++) {
                    for (var j = selection.col; j < (selection.col + selection.colCount); j++) {
                        sheet.setStyle(i, j, style, GC.Spread.Sheets.SheetArea.viewport);
                    }
                }
            }
            sheet.resumePaint();
        }
    }
};
spread.commandManager().register("selectWithBg", selectWithABackgroundColorCommand, null, false, false, false, false);
class CustomMenuView extends GC.Spread.Sheets.ContextMenu.MenuView {
    createMenuItemElement(menuItemData) {
        // create menu item view by your self
        // should return menu item view back
        // you can call super's createMenuItemElement here and only customize a few of menu item
        if (menuItemData.name === "selectColorPicker") {
            var containers = super.createMenuItemElement(menuItemData);
            var supMenuItemContainer = containers[0];
            while (supMenuItemContainer.firstChild) {
                supMenuItemContainer.removeChild(supMenuItemContainer.firstChild);
            }
            var colorPicker = createColorpicker();
            supMenuItemContainer.appendChild(colorPicker);

            return supMenuItemContainer;
        }
        return super.createMenuItemElement(menuItemData);
    }
    getCommandOptions(menuItemData, host, event) {
        if (menuItemData && menuItemData.name === "selectColorPicker") {
            var ele = event.target || event.srcElement;
            return ele.style.backgroundColor;
        }
        return super.getCommandOptions(menuItemData, host, event);
    }
}
spread.contextMenu.menuView = new CustomMenuView();

Methods

onOpenMenu

▸ onOpenMenu(menuData, itemsDataForShown, hitInfo, spread): boolean

open context menu

example

   var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
   spread.contextMenu.onOpenMenu = function (menuData, itemsDataForShown, hitInfo, spread) {
          console.log(menuData);
          console.log(itemsDataForShown);
          console.log(hitInfo);
          console.log(spread);
          alert("menu is opening");
          //you can change itemsDataForShown to change filter result
          //if you only want to change filter result,return false or don't return anything
          //you also can open your own context menu,if you want to do this,return true
          //return true;
   };

Parameters

Returns

boolean

indicate whether or not the contextmenu event has been processed done