Context Menu (Delete Comment/Edit Comment)

Context Menu (Delete Comment/Edit Comment)

Posted by: truongvancanhdtu on 6 March 2023, 3:33 pm EST

• 

  truongvancanhdtu

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 6 March 2023, 3:33 pm EST - Updated 11 January 2024, 5:40 am EST

  Hi everyone, I am a newbie Spread Js so I encountered an issue that the sheet.options.isProtected = true so Delete Comment/Edit Comment will be not shown.
  
  I wonder if is there any solution to fix this issue.
  
  Thanks everyone so much

• 

  truongvancanhdtu

  • Post Options:
  • Link
    Copy

  Posted 6 March 2023, 5:33 pm EST

  Noted

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 8 March 2023, 11:34 pm EST

  Hello Ella,

  I hope you are doing well. I would like to inform you that, in accordance with Microsoft Excel’s policy, SpreadJS does not allow the editing or deleting of comments on a protected sheet by default. Therefore, the Delete Comment and Edit Comment options are not displayed in the context menu. However, I understand that you may have a use case where you need to override this behavior and allow the user to delete comments on a protected sheet.

  In this case, I suggest that you override the onOpenMenu method of the Designer and add a custom context menu option for deleting comments. You can refer to the code snippet and sample provided below to accomplish this task:

  var oldDesignerOnOpenMenu = designer.Spread.contextMenu.onOpenMenu;
  designer.getWorkbook().contextMenu.onOpenMenu = function (menuData, itemsDataForShown, hitInfo, ctx) {
      let result = oldDesignerOnOpenMenu.apply(this, arguments);
      let activesheet = ctx.getActiveSheet();
  
      // Check if the sheet is protected and the selected cell contains comment
      if (hitInfo.worksheetHitInfo && activesheet.options.isProtected && activesheet.comments.get(hitInfo.worksheetHitInfo.row, hitInfo.worksheetHitInfo.col)) {
          // Insert the Delete Comment Command
          itemsDataForShown.push({
              command: "customDeleteCommand",
              iconClass: "gc-spread-deleteComment",
              name: "customDeleteCommand",
              text: "Custom Delete Comment"
          });
      }
  
      return result;
  }

  In this code snippet, we are first storing the original onOpenMenu method of the context menu in a variable called oldDesignerOnOpenMenu. Then, we are overriding the onOpenMenu method of the Designer and checking if the currently active sheet is protected and if the selected cell contains a comment. If both of these conditions are true, we are adding a custom Delete Comment command to the context menu.

  Please note that the customDeleteCommand is not a built-in command in SpreadJS, so you need to register it using the CommandManager.register method. You can refer to the documentation for more information on this method.

  I have also included a sample code link that you can use as a reference to implement the custom context menu option. If you face any issues or require further assistance, please do not hesitate to reach out to us. We are always here to help you.

  Sample: https://jscodemine.grapecity.com/share/NuW9HEPJz0m64uLyL_hyag/?defaultOpen={“OpenedFileName”:[“/index.html”,“/package.json”,“/src/app.js”],“ActiveFile”:“/index.html”}

  References:

  onOpenMenu method: https://www.grapecity.com/spreadjs/api/v15/classes/GC.Spread.Sheets.ContextMenu.ContextMenu#onopenmenu

  register method: https://www.grapecity.com/spreadjs/api/v15/classes/GC.Spread.Commands.CommandManager#register

  You can also post your query on our dedicated SpreadJS forum(https://www.grapecity.com/forums/spreadjs).

  Best regards,

  Ankit.