Add Context Menu for SpreadJS

Do you want to add a context menu in SpreadJS? It is very simple. No mouse down event, no left or right mouse button checking, just popup the menu in contextmenu event of the SpreadJS place-holder element. Here is a sample that illustrates how you can show a Wijmo Menu widget as a context menu in SpreadJS. The first step is to create an HTML page, then add both the JavaScript library and CSS references in the "head" tag. Then add a SpreadJS place holder element in the "body" tag, please refer here for more information on this step. Next, define the Wijmo Menu in the "body" tag as well. Then we need to initialize the SpreadJS and Wijmo Menu.

$("#ss").wijspread();  
$("#contextMenu").wijmenu({  
    trigger: "#ss",  
    triggerEvent: "rtclick",  
    orientation: "vertical",  
    select: function (e, data) {  
        // process menu item click here  
    }  
});  

You will need to adjust the menu position in the contextmenu event, and close the menu in the mousedown event of the canvas element.

$("canvas").mousedown(function (e) {  
    // hide context menu when the mouse down on SpreadJS  
    $("#contextMenu").wijmenu("hideAllMenus", e)  
});  
$("#ss").bind('contextmenu', function (e) {  
    // move the context menu to the position of the mouse point  
    $("#contextMenu").wijmenu("option", "position", { of: e });  
return false;  
});  

OK, done! When you perform a right mouse click in SpreadJS, the context menu will popup. Here is the sample so you may try it in action.