Create custom tabs with native functionalities

Create custom tabs with native functionalities

Posted by: richardrusnak on 9 December 2021, 9:28 am EST

• 

  richardrusnak

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 9 December 2021, 9:28 am EST

  Hello,

  I would like to ask if there is possible to implement custom tabs with all spreadJS functionalieties.

  We already implemented custom tabs, but we have problem with cells referencies, after sheet change.

  After sheet change, active cell’s focus is canceled and with usage of

  evalueateFormula

  function, there is only

  =

  in the editingText (it invokes

  Invalid Formula

  error), because of canceled focus, after custom tab click.

  Is it possible to implement this with the same behavior as spreadJS’s tabs already have?

  Thanks, Richard

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 10 December 2021, 8:13 am EST

  Hey,

  You can use spread.setActiveSheet() method to set the active sheet. After changing sheets through custom tabs, you can use the spread.getActiveSheet() method to get the active sheet and use it wherever sheet reference is required.

  Here is a sample: https://jscodemine.grapecity.com/share/9M8hB0-ifk6HhOLh_VUCjA/

  Please let us know if you face any other issues.

  API Docs:

  setActiveSheet Method:
  
  https://www.grapecity.com/spreadjs/docs/v14/online/SpreadJS~GC.Spread.Sheets.Workbook~setActiveSheet.html

  getActiveSheet Method:https://www.grapecity.com/spreadjs/docs/v14/online/SpreadJS~GC.Spread.Sheets.Workbook~getActiveSheet.html

  Thanks

• 

  richardrusnak

  • Post Options:
  • Link
    Copy

  Posted 14 December 2021, 6:40 am EST - Updated 3 October 2022, 9:20 am EST

  Imaged because of editing previous reply

  1. first image reference
     
     

     

     818×432 31.3 KB

  2. second image reference
     
     

• 

  richardrusnak

  • Post Options:
  • Link
    Copy

  Posted 14 December 2021, 6:41 am EST - Updated 3 October 2022, 9:20 am EST

  Hello,

  Im not sure if i explained it clearly, so I will send you screens with more specific details.

  • We have 2 sheets → sheet1 & sheet2 with custom tab implementation
    
    
  • In sheet1, there is

    100

    in A1, and we want to reference this cell from sheet2
  • so I put

    =

    to B1 in sheet2
    
    
  • change the active sheet on

    sheet1

    tab click
    
    [IMAGE IN NEXT REPLY BECAUSE OF EDITING]
  • click on A1 to and call GC.Spread.Sheets.CalcEngine.evaluateFormula fucntion.
  • it should have

    editingText

    input, with

    =Sheet1!A1 

    as value after click on cell A1
    
    [IMAGE IN NEXT REPLY BECAUSE OF EDITING]
  • after submit, the

    editingText

    is still

    =

    so in returns ‘Invalid Formula’ error
  • also this is executed after active cell changed with custom tabs

  This actually works with native tabs, but we want to implement this functionality with our custom tabs.

  Hope I described the problem more clearly.
  
  Thanks, Richard

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 15 December 2021, 12:29 pm EST

  Hey,

  We are sorry but this feature (change activeSheet using the external buttons while preserving the edit state) is not supported.

  It conflicts with our internal editor’s life cycle.

  Thanks.

• 

  sebastian

  • Post Options:
  • Link
    Copy

  Posted 8 April 2022, 4:53 am EST

  Hello there,
  
  I’d like to ask, whether it would be possible to simulate the native tab click as to “change” the active sheet (tab) AND preserve the internal editor state when editing the formula?

  It has to be done internally as far as I’m concerned, since the Tab Strip is rendered as a canvas.

  I’ve tried using ```
  
  setActiveSheetTab

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 11 April 2022, 5:15 am EST

  Hi Sebastian,

  You can perform the tab click by getting the coordinates of the sheet name from the tab strip and performing click operation.

  Please find the attached code snippet through which you can get the coordinate of the sheet name from the tab strip:

  
  function getActiveSheetTabRect(spread, sheetIndex) {
      var hostID = spread.getHost().id;
      var tabStripHost = document.getElementById(hostID + "_tabStrip");
      var offset = getOffset(tabStripHost), width = tabStripHost.clientWidth, height = tabStripHost.clientHeight;
      var startX, acTabWidth, flag = false, activeSheetIndex = sheetIndex;
      for (var x = 0; x < width; x++) {
          var hitInfo = spread.hitTest(x + offset.left, height / 2 + offset.top);
          var tabStripHitInfo = hitInfo && hitInfo.tabStripHitInfo;
          if (tabStripHitInfo && tabStripHitInfo.sheetTab && tabStripHitInfo.sheetTab.sheetIndex !== void 0) {
              if (tabStripHitInfo.sheetTab.sheetIndex === activeSheetIndex) {
                  if (startX === void 0) {
                      startX = x;
                  }
                  flag = true;
              } else if (flag) {
                  acTabWidth = x - startX;
                  break;
              }
          } else if (flag) {
              acTabWidth = x - startX;
              break;
          }
      }
      return { x: startX + offset.left + 5, y: offset.top, width: acTabWidth, height: height - 5 };
  }
  function getOffset(elem) {
      var docElem, win, box = { top: 0, left: 0 }, ownerDocument = elem && elem.ownerDocument;
      if (!ownerDocument) {
          return;
      }
      docElem = ownerDocument.documentElement;
      if (elem.getBoundingClientRect) {
          try {
              box = elem.getBoundingClientRect();
          }
          catch (e) {
          }
      }
      win = ownerDocument.defaultView;
      return {
          top: box.top + (win.pageYOffset || docElem.scrollTop) - (docElem.clientTop || 0),
          left: box.left + (win.pageXOffset || docElem.scrollLeft) - (docElem.clientLeft || 0)
      };
  } 
  

  Please let us know if you need further assistance.

  Regards
  
  Ankit