How to add menu items to the tabstrip context menu

How to add menu items to the tabstrip context menu

Posted by: adisa.craig on 13 September 2024, 1:12 pm EST

• 

  adisa.craig

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 13 September 2024, 1:12 pm EST - Updated 13 September 2024, 1:24 pm EST

  I am looking to add options for users to rename, duplicate or protect sheets from the tabstrip context menu, how would I go about adding a new context menu item.
  
  Also is it possible to rename or remove any of the current tabstrip context menu items

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 16 September 2024, 6:15 am EST - Updated 16 September 2024, 6:20 am EST

  Hi,

  You could refer to the attached sample that demonstrates adding the context menu options to the Sheet Tab.

  To add the menu items to the context menu, it will be similar to the following demo https://developer.mescius.com/spreadjs/demos/features/worksheet/context-menu/extend-context-menu#demo_source_name, however, the workArea property will be sheetTab.

  To modify the name or delete the existing context menu options, you could use the following:

  
  spread.contextMenu.menuData.forEach((item, index) => {
      // Remove Delete Sheet Option
      if (item.name === "gc.spread.deleteSheet") {
          spread.contextMenu.menuData.splice(index, 1);
      }
      // Change the Menu Item Name from "Insert" to "Insert Sheet"
      if (item.name === "gc.spread.insertSheet") {
          item.text = "Insert Sheet"
      }
  });

  For duplicate sheet, you could us our existing “copySheet” command. For renaming the sheet, you could rename by double tapping the sheet name, and enter the new name or take input using a dialog/prompt.

  Sample: https://jscodemine.mescius.io/share/ha2n5Kp5PUGS2q4vc_3reA/?defaultOpen={"OpenedFileName"%3A["%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  Please refer to the above sample and let us know if you face any issues. Similarly you could add other context menu items.

  References:

  copySheet command: https://developer.mescius.com/spreadjs/api/modules/GC.Spread.Sheets.Commands#copysheet

  menuData method: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.ContextMenu.ContextMenu#menudata

  You could also override the onOpenMenu method to change the command names in runtime: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.ContextMenu.ContextMenu#onopenmenu

  Regards,

  Ankit

  

• 

  adisa.craig

  • Post Options:
  • Link
    Copy

  Posted 16 September 2024, 5:29 pm EST

  Hi thanks for the quick response, and above did answer all of my questions. I just had one more.
  
  On the contextmenu there is the class “gc-ui-contextmenu-icon” on each option, how do I enable the icons to show and is it possible to add icons to newly created options or change icons of the current options

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 17 September 2024, 12:30 am EST

  Hi,

  To add the Icon, you could define the “iconClass” property on the menu item similar to the following:

  // Protect Sheet
  var protectSheet = {
      text: "Protect Sheet",
      name: "protectSheet",
      command: "protectSheetCmd",
      workArea: "sheetTab",
      iconClass: "protectSheet-icon"
  };

  For existing items, it is same as the above, you could either loop, or get the item directly from the “menuData” array and change/add the “iconClass” property.

  spread.contextMenu.menuData.forEach((item, index) => {
      // Remove Delete Sheet Option
      if (item.name === "gc.spread.deleteSheet") {
          spread.contextMenu.menuData.splice(index, 1);
      }
      // Change the Menu Item Name from "Insert" to "Insert Sheet"
      if (item.name === "gc.spread.insertSheet") {
          item.text = "Insert Sheet";
      }
      // Add Icon to Already Existing Context Menu Item
      if (item.name === "gc.spread.hideSheet") {
          item.iconClass = "hideSheet-icon";
      }
  });

  Further, like mentioned earlier, if you want to perform some actions like disabling, removing icons, changing text dynamically or based on some condition, you could override the “onOpenMenu” method. Refer to the following code:

  // Override the OnOpenMenu Method
  let oldOnOpenMenu = spread.contextMenu.onOpenMenu;
  spread.contextMenu.onOpenMenu = function (menuData, itemsDataForShown, hitInfo, spread) {
      let result = oldOnOpenMenu.apply(this, arguments);
      console.log(menuData);
      console.log(itemsDataForShown);
      console.log(hitInfo);
      console.log(spread);
      // Peform Custom Actions Like Removing Items, Changing Text, Changing Icons, Disabling Item (Based on Custom Condition)
      let activeSheet = spread.getActiveSheet();
      itemsDataForShown.forEach((item, index) => {
          // Remove the Insert Sheet Option From Sheet1
          if (item.name === "gc.spread.insertSheet" && activeSheet.name() === "Sheet1") {
              itemsDataForShown.splice(index, 1);
          }
          // Protect Sheet Option is Disabled for Sheet2
          if (item.name === "protectSheet" && activeSheet.name() === "Sheet2") {
              item.disable = true;
          }
      })
      //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;
      return result;
  };

  Sample: https://jscodemine.mescius.io/share/12nx0KN_lkGpnKFLueyRtw/?defaultOpen={"OpenedFileName"%3A["%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  In the sample, the background image is applied on the “index.html” page of the sample. Further, you could refer to the all the options available on the menuData item: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.ContextMenu.ContextMenu#menudata

  Regards,

  Ankit