How to add append to text to custom context menu?

How to add append to text to custom context menu?

Posted by: priyatama.bhadke on 19 September 2023, 5:31 pm EST

• 

  priyatama.bhadke

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 19 September 2023, 5:31 pm EST

  Hi,

  I have requirement where when I right click custom context menu appears and I want to append text to one of menu item . Can you please help me to understand how to do that?

  Regards,
  
  Priya B

• 

  chandan.rawat

  

  • Post Options:
  • Link
    Copy

  Posted 20 September 2023, 7:24 pm EST

  Hi,

  As per my understanding, you want to change the text of a context menu option(item).

  For the above use case, please refer to the below-mentioned approaches.

  In case of SpreadJS(without Designer), you can get the ContextMenu instance using spread.contextMenu. The contextMenu.menuData property contains an array of IMenuItemData interface objects. You can change the “text” property IMenuItemData object so that appended/changed text is shown in the context menu.

  Please refer to the code snippet and attached sample.

      // gets the ContextMenu instance of spread
      let contextMenu = spread.contextMenu;
      let copyOption = contextMenu.menuData.find((item) => item.name === 'gc.spread.copy');
      copyOption.text += ' (appended text)';

  sample: https://jscodemine.grapecity.com/share/cAiCo5c_C0GoUpumGl2i6g/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  References:

  ContextMenu class: https://www.grapecity.com/spreadjs/api/v16/classes/GC.Spread.Sheets.ContextMenu.ContextMenu
  
  IMenuItemData interface: https://www.grapecity.com/spreadjs/api/v16/interfaces/GC.Spread.Sheets.ContextMenu.IMenuItemData

  In case of SpreadJS Designer, you can get the command corresponding to a context menu option using GC.Spread.Sheets.Designer.getCommand() method and change the “text” property of the command. The command object is an object of ICommand interface.

  After changing the “text” property, you need to add the modified command object in the config.commandMap and set the modified config using designer.setConfig() method.

  Please refer to code snippet and attached sample.

  // gets the command associated with Copy option in the context menu of designer
      let contextMenuCopyCommand = GC.Spread.Sheets.Designer.getCommand('contextMenuCopy');
      // modifies the text of menu option(item)
      contextMenuCopyCommand.text += ' (appended text)';
  
      // adds modified command to the command map so that modified command object would be used
      config.commandMap = {
          // name of command
          contextMenuCopy: contextMenuCopyCommand
      }
  
      // sets the modified config to the designer
      designer.setConfig(config);

  sample: https://jscodemine.grapecity.com/share/Z-_tdYM550a56FHKIaJT4Q/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  References:

  ICommand interface: https://www.grapecity.com/spreadjs/api/designer/interfaces/GC.Spread.Sheets.Designer.ICommand#interface-icommand
  
  designer.setConfig(): https://www.grapecity.com/spreadjs/api/v16/designer/classes/GC.Spread.Sheets.Designer.Designer#setconfig

  Please let us know if you still face the issue. Also, explain your use case in more detail.

  Regards

• 

  priyatama.bhadke

  • Post Options:
  • Link
    Copy

  Posted 24 September 2023, 5:45 pm EST

  Hi Chandan,

  This solution doesn’t solves my issue.

  As soon as I right click Ajax call will be called and it will return some result that result I want to append to custom context menu item.

  I am using code for creating custom context menu which you have shared earlier with me in different case. Here is the that case.

  https://www.grapecity.com/forums/spreadjs/how-to-remove-default-context-menu-in-spreadjs-16

  Can you please help me to add ajax return text to custom context menu with this code.

  Regards,
  
  Priya B

• 

  chandan.rawat

  

  • Post Options:
  • Link
    Copy

  Posted 26 September 2023, 12:16 am EST

  Hi,

  Based on my understanding, you want to append custom text on the context menu options when the context menu is opened with the right click.

  For the above-mentioned use case, you may override the contextMenu.menuView.createMenuItemElement() method. This method is invoked to create the context menu options. Inside this method, you can make an AJAX request and append custom text to the context menu item.

  Please refer to the attached sample for more understanding.

  sample: https://jscodemine.grapecity.com/share/xZHH1Ok230Kbg-hE6snXmg/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  References:

  ContextMenu class:https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.ContextMenu.ContextMenu
  
  MenuView class: https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.ContextMenu.MenuView
  
  menuView.createMenuItemElement(): https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.ContextMenu.MenuView#createmenuitemelement

  Regards