Customizing Context Menu

The datatable part of the Spreadsheet can also be customized. For example, you can adjust the context menu to your needs. To get the context menu, you can use:

spreadsheet.$$("context")

Adding Custom Options

You can use the OnContextMenuConfig event to add options to the default menu. For example:

webix.ui({
  view:"spreadsheet",
  id:"sheet",
  toolbar:"full",
  data:spreadsheet_data,
  on:{
    onContextMenuConfig:function(ev){
      if (ev.area == "data")
        ev.data.push({id:"message", value:"Message"});
    },
    onCommand:function(obj){
      if (obj.id == "message")
        webix.message("Some message");
    }
  }
});

Also you can completely replace default options with your custom ones:

 on:{
    onContextMenuConfig:function(ev){
      if (ev.area == "column" || ev.area == "row") return false;
      if (ev.area == "data")
        ev.data = [
          { id:"com-1", group:"myContext", value:"Command 1" },
          { id:"com-2", group:"myContext", value:"Command 2" },
          { id:"com-3", group:"myContext", value:"Command 3" }
        ];
    }
  }

Preventing Context Menu from Showing

If you want to prevent the menu from showing, you should attach the onBeforeShow event to it and return false from the handler function.

menu.attachEvent("onBeforeShow",pos => {
  //remove context menu on header click
  const trg = $$("sheet").$$("cells").locate(pos);                                            
  const header = trg.header || trg.column == "rowId";        
  if(header){
    menu.hide();
    return false;
  }
})

Disabling and Hiding Options

If you want to disable some options from the default context menu, you should call disableItem method:

menu.disableItem("clear")

To hide menu items, call hideMenuItem method:

menu.hideMenuItem("sort")

menu.attachEvent("onBeforeShow", pos => {                       
  const selected = $$("sheet").getSelectedId(true);
  for(let i = 0; i < selected.length; i++){
    if(selected[i].column == 3){
      //disable context menu items on concrete column
      menu.disableItem("clear"); 
      menu.disableItem("lock-cell");
      menu.hideMenuItem("sort");
    }
  }
})

Removing Context Menu

To remove context menu completely, use the destructor method:

menu.destructor()

Making Custom Context Menu

You can attach a custom context menu with some actions for datatable cells. To do this, first you need to remove the default one. Then create a new menu and attach it to cells using the attachTo method.

webix.ui({
  view:"spreadsheet", 
  id:"ss",
  data:spreadsheet_data
});
 
const ssheet = $$("ss");
const menu = ssheet.$$("context");
menu.destructor();
 
webix.ui({
  view:"contextmenu",
  data:["Cut", "Copy", "Paste", "Delete"],
  click:function(id, event){
    var cell = this.getContext().id;
    webix.message(id+" on row "+cell.row+" of the column "+cell.column);                            
  }
}).attachTo( ssheet.$$("cells") );