Scroll Position Changes on Expanding/Collapsing Group in Sheet

Scroll Position Changes on Expanding/Collapsing Group in Sheet

Posted by: krishna.shah on 31 July 2025, 1:47 am EST

• 

  krishna.shah

  • Post Options:
  • Link
    Copy

  Posted 31 July 2025, 1:47 am EST

  I observed that when expanding a group in the sheet, if the content fits within the visible area, the scroll position remains unchanged. However, if the expanded content exceeds the viewport, the sheet automatically scrolls to bring the expanded group to the top—presumably to ensure the content is fully visible. Is it possible to maintain the current scroll position instead?

• 

  chirag.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 31 July 2025, 2:37 am EST - Updated 31 July 2025, 2:42 am EST

  Hi,

  We can replicate the behavior you mentioned on our end. However, the behavior is similar to Microsoft Excel. Please refer to the screenshot below demonstrating the same:

  

  The behavior can be customized by handling the RangeGroupStateChanging and RangeGroupStateChanged events of SpreadJS. Please refer to the code snippet below that maintains the scroll location of the Spreadsheet:

  spread.bind(GC.Spread.Sheets.Events.RangeGroupStateChanging, function (e, info) {
          window.gc_top_row_spread = info.sheet.getViewportTopRow(1);
  });
  spread.bind(GC.Spread.Sheets.Events.RangeGroupStateChanged, function (e, info) {
          info.sheet.suspendPaint();
          info.sheet.showRow(window.gc_top_row_spread, GC.Spread.Sheets.VerticalPosition.top);
          info.sheet.resumePaint();
          window.gc_top_row_spread = null;
  });

  You can also refer to the attached sample, which utilizes the above code snippet and handles the scroll behavior on range group expansion (see below).

  Please feel free to reach out if you require any further assistance.

  Kind Regards,
  
  Chirag Gupta

  Attachment: https://jscodemine.mescius.io/share/L4iMtaQ4p0uPoH4nYwr-ug/?defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fapp.js"]%2C"ActiveFile"%3A"%2Fapp.js"}

  References:

  • RangeGroupStateChanging: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Events#rangegroupstatechanging
  • RangeGroupStateChanged: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Events#rangegroupstatechanged
  • getViewportTopRow: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Worksheet#getviewporttoprow
  • showRow: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Worksheet#showrow

  Working: