Cell click prevent after scroll release

Cell click prevent after scroll release

Posted by: 16pa1a0576 on 6 July 2021, 7:53 am EST

• 

  16pa1a0576

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 6 July 2021, 7:53 am EST

  Hi,
  
  We have customized scrollbar as of mobile scroll. Then when i scroll in the spreadsheet by using that scrollbar and then releasing the scroll, a click event is happening on the cells. How do i prevent that click event on the cells ?

  Can you please help me resolve this issue?

• 

  avinash.pathak

  • Post Options:
  • Link
    Copy

  Posted 7 July 2021, 7:30 am EST

  Hi,

  We are sorry but we are unable to replicate the issue at our end. Could please share a small sample that replicates the issue so that we could investigate it further and help you accordingly.

  You may also refer to the following sample that we used for testing and modify it to replicate the issue.

  sample: https://codesandbox.io/s/spread-js-starter-forked-1cu1q?file=/index.html

  Regards,
  
  Avinash

• 

  16pa1a0576

  • Post Options:
  • Link
    Copy

  Posted 10 July 2021, 7:42 am EST - Updated 3 October 2022, 9:44 am EST

  Hi,
  
  In our application we are using React+Typescript. In this, we have customised the scroll using this

  spread.options.scrollbarAppearance = GC.Spread.Sheets.ScrollbarAppearance.mobile;

  and our sheet scrollbar looks like
  
  

  

  1036×104 11.3 KB

  When we scroll by clicking on the scrollbar, the cells behind the scrollbar also getting clicked. How can we prevent this?

• 

  avinash.pathak

  • Post Options:
  • Link
    Copy

  Posted 12 July 2021, 4:20 am EST

  Hi,

  We are sorry we tried t replicate in React with typeScrip but we are still unable to replciate the issue. We have tested the behavioru in andriod mobile(oneplus 8) as well as in windows system(intel i5 10th Gen). in both the it worked fine.

  Could you please provide a sample project that replciates the issue so that we could investiaget it furthe and assist you accordingly.

  please refer to the following sample that we used for testing.

  sample: https://codesandbox.io/s/react-typescript-forked-4k5mj?file=/src/index.tsx

  You please refer to the following gifs of observation and let us knwo if we missed any thing.

  Android(Oneplus 8) observation:https://www.dropbox.com/s/vq972es1hsrtl5o/oneplus.gif?dl=0

  Windows observation: https://www.dropbox.com/s/n954go2l7q0r8vx/window.gif?dl=0

  Regards
  
  Avinash

• 

  16pa1a0576

  • Post Options:
  • Link
    Copy

  Posted 13 July 2021, 11:30 am EST

  Here, we had to Wrap SpreadSheets component around a div and we are using the clickHandler
  
  of that div for several other functionalities also.

  Please note that it will be persisted.

  To Reproduce the issue:

  1. click on horizontal scrollbar when the sheet cells are behind it.
     
     cell click is getting triggered.
  2. Drag the horizontal scroll bar, move and release it
     
     on a particular cell.
  3. you can check the triggered event in console after scrolling

  https://codesandbox.io/s/spread-js-starter-forked-q8ixd?file=/src/index.js

  We have to prevent scroll event such that, it is not propogated to parent div
  
  Could you please help me with this ?

• 

  avinash.pathak

  • Post Options:
  • Link
    Copy

  Posted 14 July 2021, 3:38 am EST

  Hi,

  Thanks for the sample. the issue is, the Click event gets fired when we release the mouse so if we release the mouse on the viewport position then hit test gives the information about the sheet not about the scrollbar.

  For this, you may use the mouseDown event and perform a hit test on the workbook level so that whenever the scrollbar gets clicked you spread should provide scrollbar info. Please refer to the following code snippet and attached sample that demonstrates the same.

  
   const clickHandler = (event) => {
      event.stopPropagation();
      if (spread) {
        const offsetValues = document
          .getElementById("spread_sheet")
          ?.getBoundingClientRect();
        let xValue = event.clientX;
        let yValue = event.clientY;
        if (offsetValues) {
          xValue = xValue - offsetValues?.left;
          yValue = yValue - offsetValues?.top;
        }
        const target = spread?.hitTest(xValue, yValue);
        const isColHeader = target.cellTypeHitInfo?.sheetArea === 1;
        const isColHeaderDragged = target.resizeInfo?.sheetArea === 1;
  
        if (
          target.verticalScrollBarHitInfo ||
          target.horizontalScrollBarHitInfo
        ) {
          console.log("scrolBarClicked");
        } else {
          if (
            target &&
            target?.row !== undefined &&
            target?.row >= 0 &&
            target?.col !== undefined &&
            target?.col >= 0
          ) {
            /* here we wrapped the workbook inside a div(this is mandatory for our case)
            I clicked on the scrollbar and then since the scroll is on the spreadsheet cells
            we are able to get click events on cells.
  
            How can we prevent this scroll from cell click?
          */
            document.getElementById("CellClick").innerHTML =
              "Cell:( " + target.row + ", " + target.col + " ) Clicked";
            console.log(target.row, target.col);
          }
        }
      }
    };
  
  

  sample: https://codesandbox.io/s/spread-js-starter-forked-uts8f?file=/src/index.js:1423-2840

  Regards
  
  Avinash