Extended Context Menu

The SpreadJS built-in context menu supports adding/removing custom menu options. Each option follows the defined menu data in the JSON schema.

Description
app.js
index.html
styles.css
Copy to CodeMine

You can define the menuData property as shown here:

    var openDialog = {
        text: 'Open Dialog',
        name: 'openDialog',
        command: showLoginDialog,
        workArea: 'viewport'
    };
    spread.contextMenu.menuData.push(openDialog);
    function showLoginDialog() {
        //pop up login dialog
    }

You can add/remove the custom menu options by using the spread.contextMenu.menuData property:

    $.each(spread.contextMenu.menuData, function (p, v) {
        if (v.name === 'openDialog') { //openDialog is a command's name
            spread.contextMenu.menuData.splice(p, 1)
        }
    });
You can define the menuData property as shown here: You can add/remove the custom menu options by using the spread.contextMenu.menuData property:
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 2}); initSpread(spread); }; function initSpread(spread) { initEvents(spread); } function initEvents(spread) { document.getElementById('addFormatCells').onchange = function () { var commandRemoved = false; spread.contextMenu.menuData.forEach(function (item, index) { if (item && item.name === "markWithRedBg") { spread.contextMenu.menuData.splice(index, 1); commandRemoved = true; } }); if (commandRemoved) { return; } var commandManager = spread.commandManager(); var markWithRedBg = { text: "Format Cells", name: "markWithRedBg", command: "markWithRedBg", workArea: "viewport" }; spread.contextMenu.menuData.push(markWithRedBg); var markWithRedBgCommand = { canUndo: false, execute: function () { var style = new GC.Spread.Sheets.Style(); style.name = 'style1'; style.backColor = 'red'; 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(); } }; commandManager.register("markWithRedBg", markWithRedBgCommand, null, false, false, false, false); }; document.getElementById('addOpenDialog').onchange = function () { var commandRemoved = false; spread.contextMenu.menuData.forEach(function (item, index) { if (item && item.name === "openDialog") { spread.contextMenu.menuData.splice(index, 1); commandRemoved = true; } }); if (commandRemoved) { return; } var openDialog = { text: "Open Dialog", name: "openDialog", command: showLoginDialog, workArea: "viewport" }; spread.contextMenu.menuData.push(openDialog); }; } function showLoginDialog() { if (document.getElementsByClassName('loginBox').length === 0) { var loginBox = document.createElement('div'); loginBox.className = 'loginBox'; loginBox.innerHTML = '<label for="Dialog" class="loginBoxLabel">Dialog:</label>' + '<input type="button" id="okBtn" class="btn-primary button" value="OK">' + '<input type="button" id="cancelBtn" class="btn-primary button" value="Cancel">'; document.body.appendChild(loginBox); document.getElementById('okBtn').onclick = function (){ loginBox.style.display = 'none'; }; document.getElementById('cancelBtn').onclick = function (){ loginBox.style.display = 'none'; }; } var loginBoxEle = document.getElementsByClassName('loginBox')[0]; if (loginBoxEle.style.display === 'none') { loginBoxEle.style.display = 'block'; } }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <p>Right click any cell to bring up its context menu. You can then add or remove one of the demo options below:</p> <div id="settingsDiv"> <div class="option-row"> <input id="addFormatCells" type="checkbox" /> <label for="addFormatCells">Add "Format Cells" menu item</label> </div> <div class="option-row"> <input id="addOpenDialog" type="checkbox" /> <label for="addOpenDialog">Add "Open Dialog" menu item</label> </div> </div> </div> </div></body> </html>
.option-row { font-size: 14px; padding: 5px; margin-top: 10px; } .buttonStyle{ width:240px; height:30px; } .loginBox { position: absolute; left: 35%; top: 30%; background-color: white; padding: 20px; border: 1px solid #c6c6c6; box-shadow: rgba(0, 0, 0, 0.4) 1px 2px 5px; z-index: 2000; height: 100px; width: 200px; } .loginBoxLabel { display: inline-block; width: 200px; text-align: center; } .button{ width: 30%; margin: 60px 10%; text-align: center; } .sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; margin-top: 10px; } label { margin-bottom: 6px; } input { padding: 4px 6px; } input[type=button] { margin-top: 6px; } p{ padding:2px 10px; background-color:#F4F8EB; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }