Rename Sheet in Tab Context Menu

Rename Sheet in Tab Context Menu

Posted by: adisa.craig on 14 March 2025, 11:21 am EST

• 

  adisa.craig

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 March 2025, 11:21 am EST

  I have added a Rename Sheet option to the Tabstrip context menu, is it possible for the rename context menu option, instead of opening a separate dialog box, that it can trigger the sheet tab input to become editable instead, to match the behavior when double clicking the sheet tab

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 17 March 2025, 8:19 am EST

  Hi,

  There is no direct API available that can simulate the behavior of double-clicking on the sheet name in the sheets tab strip to rename the sheet. However, it is possible to simulate the double-click using JavaScript technology.

  Please refer to the attached code sample that illustrates how to edit the sheet name using the context menu option similar to UI clicks (see below).

  Please feel free to reach out if you encounter any further issues or require additional guidance.

  Attachment: RenameSheet.zip

  Kind Regards,

• 

  adisa.craig

  • Post Options:
  • Link
    Copy

  Posted 18 March 2025, 1:41 pm EST

  Hi Priyam,
  
  It seems the

   getActiveSheetTabCoordinates

  fails whenever there is any other content on the page. I added a header div above the spread and the code stopped being able to find the active tab with the hitTest
  
  RenameSheet.zip

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 19 March 2025, 2:25 am EST

  Hi,

  Yes, we have observed that the coordinates required for simulating the double click fails. We have updated our solution as per below code :-

        const spreadInstanceID = "ss";
        const tabStripID = `${spreadInstanceID}_tabStrip`;
        const spreadNS = GC.Spread.Sheets;
        const spread = new spreadNS.Workbook(spreadInstanceID);
  
        let storedCoords = null; // To store right-click coordinates
  
        // Capture right-click on the tab strip
        const tabStrip = document.getElementById(tabStripID);
        tabStrip.addEventListener("contextmenu", function (event) {
          storedCoords = { x: event.clientX, y: event.clientY };
          console.log("Stored context menu coordinates:", storedCoords);
        });
  
        // Function to simulate a double click at stored coordinates
        function simulateDoubleClick(coords) {
          setTimeout(() => {
            var canvas = document.getElementById(tabStripID);
            if (!canvas) canvas = document.getElementById("null_tabStrip");
            var event = new MouseEvent("dblclick", {
              bubbles: true,
              cancelable: false,
              clientX: coords.x,
              clientY: coords.y,
              view: window,
            });
            canvas.dispatchEvent(event);
          }, 0);
        }
  
        // Custom command to rename sheet
        const renameSheetCommand = {
          canUndo: false,
          execute: function () {
            console.log("Executing Rename at:", storedCoords);
            simulateDoubleClick(storedCoords);
          },
        };
        spread.commandManager().register("renameSheetEdit", renameSheetCommand);
  
        // Add "Rename" option to context menu
        const renameSheet = {
          text: "Rename",
          name: "Rename Sheet",
          command: "renameSheetEdit",
          workArea: "sheetTab",
        };
        spread.contextMenu.menuData.push(renameSheet);

  Fixes and Improvements:

  • Stored Coordinates on Right-Click: Now, when the user right-clicks on the tab strip, the exact mouse position is stored.
  • Double Click Simulation: When “Rename” is clicked in the context menu, it simulates a double click at the stored coordinates.

  Sample: index.zip

  Hope this works for you.

  Best Regards,

• 

  adisa.craig

  • Post Options:
  • Link
    Copy

  Posted 24 March 2025, 12:29 pm EST

  Hi Thanks,
  
  This works for the most part except in cases where the user right clicks a sheet tab that is not the currently active one. Then the input opens in the wrong location. I was trying to debug why this happens as it seems it is getting the right coordinates but it still opens incorrectly.

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 25 March 2025, 8:13 am EST

  Hi,

  We were able to replicate the issue on our end as well. The cause is unclear, so we have escalated it to the development team. The internal tracking ID is “SJS-28856”. I will update you as soon as we receive any information.

  Regards,
  
  Priyam

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 4 April 2025, 6:27 am EST

  Hi,

  The devs have suggested using the approach shown in the snippet below to simulate the double-click behavior when a custom item in the context menu is clicked:

  // Function to simulate a double click at stored coordinates
  function simulateDoubleClick(coords) {
      // console.log(getSheetTabRect(spread, spread.getActiveSheet()));
      console.log(coords)
      setTimeout(() => {
          const canvas = document.getElementById(tabStripID);
          const mousedown = new MouseEvent("mousedown", {
              bubbles: true,
              cancelable: false,
              clientX: coords.x,
              clientY: coords.y,
              view: window,
          });
          canvas.dispatchEvent(mousedown);
          const mouseup = new MouseEvent("mouseup", {
              bubbles: true,
              cancelable: false,
              clientX: coords.x,
              clientY: coords.y,
              view: window,
          });
          canvas.dispatchEvent(mouseup);
          const event = new MouseEvent("dblclick", {
              bubbles: true,
              cancelable: false,
              clientX: coords.x,
              clientY: coords.y,
              view: window,
          });
          canvas.dispatchEvent(event);
      }, 0);
  }

  Please refer to the attached sample: Sample.zip

  Best regards,
  
  Priyam