Buttons that left / right scroll the table

Buttons that left / right scroll the table

Posted by: ryan on 1 September 2022, 2:18 pm EST

• 

  ryan

  • Post Options:
  • Link
    Copy

  Posted 1 September 2022, 2:18 pm EST - Updated 3 October 2022, 9:02 am EST

  

  1440×1024 99.8 KB

  Hi - is it possible to implement the left/right horizontal scroll arrow buttons in the header in the screenshot with spreadjs? clicking right button would reveal additional columns on the right. which of the following is possible and how is it achieved

  1. click the button to scroll the width of the cell so a new cell is revealed each time the user clicks the button.
  2. click the button to scroll horizontally a set number of pixels
  3. click the button and it jumps to a specific column that we define programatically
• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 2 September 2022, 7:44 am EST

  Hi,

  We are sorry but for this type of scrollBarAppearance we do not support the scrollbar buttons. If you need you could implement this using the scroll method. Please refer to the following code snippet and let me know if you face any issues.

  
    spread.options.scrollByPixel = true;
      document.querySelector("#upScroll").addEventListener("click",(e)=>{
          let sheet = spread.getActiveSheet();
          sheet.scroll(10);
      })
  
       document.querySelector("#downScroll").addEventListener("click",(e)=>{
          let sheet = spread.getActiveSheet();
          sheet.scroll(-10);
      })
            document.querySelector("#rightScroll").addEventListener("click",(e)=>{
          let sheet = spread.getActiveSheet();
          sheet.scroll(0,10);
      })
  
       document.querySelector("#leftScroll").addEventListener("click",(e)=>{
          let sheet = spread.getActiveSheet();
          sheet.scroll(0,-10);
      })
  
  

  sample:https://jscodemine.grapecity.com/share/3rUP0gPBKkWIMsYgvFojTQ/

  regards,
  
  Avinash

• 

  ryan

  • Post Options:
  • Link
    Copy

  Posted 6 September 2022, 1:29 pm EST

  can you set up buttons that jump to a particular column? click the button and it jumps to column Q for instance, or click the button and it jumps 5 columns to the right?

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 7 September 2022, 6:55 am EST

  Hi,

  For this, you may use the showColumn method. Please refer to the following code snippet and let me know if you face any issues.

  
           document.querySelector("#jump").addEventListener("click",(e)=>{
          let sheet = spread.getActiveSheet();
          sheet.showColumn(16);
      })
  
  

  showColumn: https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.Worksheet#showcolumn

  Regards,
  
  Avinash