This sample shows how you can customize the built-in context menu.
You can rewrite the defined context menu style class to apply different styles. For example:
.gc-ui-contextmenu-group-header { font-weight:normal; background-color:none; }
You can customize the menu item's view structure by overwriting the MenuView's createMenuItemElement function:
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss')); function CustomMenuView() {} CustomMenuView.prototype = new GC.Spread.Sheets.ContextMenu.MenuView(); CustomMenuView.prototype.createMenuItemElement = function (menuItemData) { // create menu item view by your self // you can call super's createMenuItemElement here and only customize a few of menu item // should return menu item view back }; spread.contextMenu.menuView = new CustomMenuView();
You can overwrite the MenuView's getCommandOptions function to show the options when the command is executed:
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss')); function CustomMenuView() {} CustomMenuView.prototype = new GC.Spread.Sheets.ContextMenu.MenuView(); CustomMenuView.prototype.getCommandOptions = function (menuItemData, host, event) { // For most of the menu items, only the selections on sheets or the active sheet’s name are needed // but there may be some menu items need special parameters,like color picker,change color // To change colors, the command needs to know which color the user clicked on, so overwrite this function and return this // parameter's value here. }; spread.contextMenu.menuView = new CustomMenuView();